Print Page - Drag & Drop from external source to tree

Title: Drag & Drop from external source to tree
Post by: BCottle on July 27, 2016, 10:41:24 AM

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 (http://www.jeasyui.com/forum/index.php?topic=3323.0), but it was never answered.

Title: Re: Drag & Drop from external source to tree
Post by: stworthy on July 28, 2016, 06:10:15 AM

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;
		}
	}
})

Title: Re: Drag & Drop from external source to tree
Post by: BCottle on July 28, 2016, 08:26:29 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: BCottle on July 27, 2016, 10:41:24 AM