Drag & Drop from external source to tree

[BCottle]

Using jQuery EasyUI 1.4, so I don't know if this has been changed, but I cannot find a way to do this.

I have a tree (not treegrid) with items that have been customized. I can drag and drop those items to new locations in the same tree, which is good. I want to keep this functionality.

I also have another widget on the same page that has a list of "template" items (they have not been customized). I want to drag those over to the tree and drop them in the right place, and then either reject the drag for business reasons OR have a popup where I can customize the item before it is properly inserted into the tree at the desired location.

This is the part I could not figure out.

At first I made all the template items draggable, but the tree would simply ignore them in its onDrop method. I got around this by putting the template items in another tree, and the destination tree now happily puts them where I dragged them.

The new problem is that it removes the template item from the source tree! I never want the original template item to be removed from its tree, just a copy added to the new tree, but the tree widget does not allow me to set the revert/clone option.

What can I do?

I noticed another topic ended with the same question here, but it was never answered.

[stworthy]

Before dropping a node on a tree, the 'onBeforeDrop' event fires. You can detect whether the dropping node is the template item from the source tree. If yes, you should return false in the 'onBeforeDrop' event so that the dropping action will be aborted. And then please insert or append a new node to the destination tree. The code below shows how to achieve this functionality.

Code:

$('#tt').tree({
	onBeforeDrop: function(dest,src,point){
		if (src.flag){
			if (point == 'top'){
				$(this).tree('insert', {
					before: dest,
					data: $.extend(true, {}, src)
				});
			} else if (point == 'bottom'){
				$(this).tree('insert', {
					after: dest,
					data: $.extend(true, {}, src)
				});
			} else {
				$(this).tree('append', {
					parent: dest,
					data: [$.extend(true, {}, src)]
				});
			}
			return false;
		}
	}
})

[BCottle]

So that essentially says:

• inspect intended drop events before they happen
• if they are from the template source
  
  • manually insert/append a copy of the template
  • "reject" the drop so the template returns to its tree
• else if the source is from the current tree, let the normal process take care of moving existing nodes of the tree around

Works fine, thanks!

It would be nice if we could use a source other than another tree, but this will definitely work for what I am doing now.