Drag out !

[haethr]

Hello,
I have a HStack, which on record from a menu can be droped to add Button to that HStack, that's allow me to add some nice preference navigation to our application .
By doing that like it :

isc.defineClass("PersonalToolBar","HStack").addProperties({
	border : "1px solid black",
	height : 20,
	membersMargin: 2,
	canAcceptDrop: true,
	dragAction : "move",
	drop : function () {
		var dragTarget =isc.EventHandler.getDragTarget();
		var dragData = dragTarget.getDragData();
		if(dragTarget && dragData) {
		for(var i = 0;i<dragData.length;i++) {
			this.addMember(
				isc.Button.create({
					title : dragData[0].name,
					click : "changeListType('"+dragData[0].value+"')",
					autoFit : true,
					height : 18,
					canDragReposition:true,
					canDrop:true,
					dragAppearance:"target"
				})
			);
		}
	}
	else 
		this.Super("drop", arguments);
	}
})
isc.PersonalToolBar.create({
	ID: "personalToolBar"
})

That work perfectly, now i would like to allow the user to remove button by droping them outside from the HStack, is there a way ?

Thx by advance

[Isomorphic]

You can do this adding a drop interaction to whatever component is used as the "background" to all other components (possibly a layout) such that "drop()" on that component removes the button. But it's more discoverable for the user to do something more explicit like a "Remove" button.

[haethr]

Yeah your right, after thinking about it, i have put a litle canvas with a little Trash icon.
I had a little problem like you can see here :

isc.Canvas.create({
			ID : "removeFromToolBarCanvas",
			autoDraw : false,
			canAcceptDrop: true,
			width : 10,
			drop : function () {
				if(isc.EventHandler.getDragTarget().canBeDestroyed) {
					preferenceLink[isc.EventHandler.getDragTarget().title] = false;
					isc.EventHandler.getDragTarget().destroy()
					for(var i=0;i<personalToolBar.members.length;i++) {
						if(personalToolBar.getMember(i).title == undefined) {
							personalToolBar.removeMember(personalToolBar.getMember(i));
						}
					}
					personalToolBar.markForRedraw();
					savePreferenceLink();
				}
			},
			getInnerHTML : function() {
				return "<img src='@@INETPUB/images/corbeille.gif'>" 
			},
			align : "center",
			canHover : true,
			showHover : true,
			getHoverHTML : function() { return  "Glissez des boutons de la zone de préférence pour les supprimer"}
		})

i had to first "destroy()" the draged button, then look for the layout replacement to remove it, during drag seems that put a "layout" to replace the component, it's not very important , but do you see a way to doing that more efficiently ? than my drop function ?

thanks by advance