Tree plugin, preventing drag-n-drop of item for siblings

[cohoman]

I'm using the jQuery EasyUI Tree plugin with my javascript coding, and I have the drag-n-drop feature activated. I'm filtering in the "onDragOver" method for the tree, returning FALSE under certain conditions when I don't want the dragged node to be drop on certain target nodes. It all seems to work well.

My problem is, I only want a dragged node to allowed to be dropped directly on a target node in the tree list. I want to prevent the ability of the dragged node from being dropped "before" or "after" a node. So essentially I only want a dragged node to become a child of another node when dropped on it, and not allow it to be dropped before or after the target node and become a sibling of the target node.

I've search through the EasyUI source code, but can't find where the drop operation is occurring and how it works (difficult to read coding when it has been minimized). Any help is greatly appreciated. Thanks!

[stworthy]

A possible solution to prevent from dragging a node before or after another node is to process onDrop event. In the point parameter indicate this action is not appending, re-insert the node to its original position. A better solution is to have a onBeforeDrop event, return false to cancel this drop action. The onBeforeDrop is not supported in version 1.3.2, it has been posted to developers to add this feature in next version.

[cohoman]

Thanks for the suggestion. I was trying to handle the onDragOver event checking the target node and looking to see if it had a "tree-node-append' class. I then returned false if it did not have this class, but that seemed to alter the classes of all the rejected target nodes permanently!

[cohoman]

I'm having trouble implementing the suggestion of checking the supplied point argument and inserting the node. Here's what I've tried:

Code:

jQuery("#tree_control").tree( { onDrop: function(target,source,point)
   {
       var node = jQuery("#tree_control").tree("getNode",target);
       
       if ( point != "append" ) // - if point is 'top' or 'bottom'
        {
           var node_source = jQuery("#tree_control").tree("find",source.id);
           var node_w_data = jQuery("#tree_control").tree("getData",node_source.target);
          jQuery("#tree_control").tree("append", {parent:target,data:node_w_data});
          return;
        } 
   }});  

     

So when the user drags a source node over to a target node and tries to drop the node just before or just after the target node, I want to append a new node as a child to the target node with the same data as the source node (later, I'll delete the original source node that was moved and dropped in the undesired location).

But when I try this, the new node doesn't appear! I still see the original node moved to undesired location, but my new node isn't present. Any comments or suggestions are appreciated.

Thanks.

[stworthy]

I was trying to handle the onDragOver event checking the target node and looking to see if it had a "tree-node-append' class. I then returned false if it did not have this class, but that seemed to alter the classes of all the rejected target nodes permanently!

This is one of the solution, here is the code to allow only appending nodes.

Code:

	<ul class="easyui-tree" data-options="url:'../tree/tree_data1.json',animate:true,dnd:true,
		onDragOver: function(target,source){
			$(target).removeClass('tree-node-bottom tree-node-top').addClass('tree-node-append');
		}
	"></ul>

Another solution is to use 'onBeforeDrop' event that will be supported in next version, the updated tree plugin can be downloaded from http://www.jeasyui.com/easyui/plugins/jquery.tree.js.

Code:

	<ul class="easyui-tree" data-options="url:'../tree/tree_data1.json',animate:true,dnd:true,
		onBeforeDrop: function(target,source,point){
			if (point=='top'||point=='bottom')return false;
		}
	"></ul>

[cohoman]

Excellent! A one-line solution that did the trick. Thank you very much for the help.