EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Zachi on December 24, 2013, 10:14:21 AM



Title: Prevent drag and drop on Tree Nodes
Post by: Zachi on December 24, 2013, 10:14:21 AM
I am using tree and try to prevent dnd on Nodes. I want to limit the dnd functionality to only allow sorting, not to move a node to another node.
In other words, if the Target-Node has the class tree-node-bottom or -top it's ok, if it has tree-node-append its forbidden.
I dont want to test it onDrop because i want to give the User Feedback on moving the Node.
I've tried onDragOver like this:
Code:
...
onDragOver : function(target,source) {
  if( $(target).hasClass('tree-node-append') )
    return false;
  else
    return true;
},
...
but this alters the classes permanently. It is ok whenn you drag the source-Node over the target-Node for the first time. But then, the targetNode will never again bekome the class tree-node-bottom or -top.
What happens exactly when i return false in onDragOver? Does this permanently disable a node?

Can anyone help? Iv'e searched the Forum and found a solution for prevent moving before and after a Node, but this does not help me. It also is not realy preventing the dragOver, it only changes the class to tree-node-append.
Thanks so far and btw: merry christmas 


Title: Re: Prevent drag and drop on Tree Nodes
Post by: stworthy on December 24, 2013, 05:49:29 PM
When return false in 'onDragOver' event, the target node will become disabled. This means that the 'onDragOver' does not be triggered again. To make it enabled, the 'enable' method must be called. Please try the code below.
Code:
	<ul class="easyui-tree" data-options="
data:data,animate:true,dnd:true,
onDragOver:function(target, source){
if ($(target).hasClass('tree-node-append')){
setTimeout(function(){
$(target).droppable('enable');
},0);
return false;
}
}"></ul>


Title: Re: Prevent drag and drop on Tree Nodes
Post by: Zachi on December 29, 2013, 02:00:25 AM
Thank's a lot, that does the job.