Tree and action on move node

[nhobbes]

Hello,

I'lm a new user of jquery and easyUI.
I find how to build a tree with movable nodes but i'm searching how to do something on drag and drop action.

What I want to do is to save the new configuration each time I do an action on the tree.

Also I would like to disable an action : a leaf become a node if you drop something on it and a node become a leaf if it has no leaf. Is it possible ?

Thanks a lot for your help

[stworthy]

When drag and drop a node, the 'onDrop' event will be triggered, in which you can save the tree node state to server.

Code:

<ul id="tt2" class="easyui-tree" data-options="url:'tree_data.json',
		dnd:true,
		onDrop:function(target,source,point){
			var targetNodeId = $(this).tree('getNode',target).id;
			var sourceNodeId = source.id;
			$.post(url, {
				targetNodeId: targetNodeId,
				sourceNodeId: sourceNodeId,
				point: point
			}, function(){
				alert('save ok');
			});
		}"></ul>

[nhobbes]

Thanks a lot for your answer. It works fine.

Do you know how to disable the drop function on a leaf ?

[nhobbes]

I think I found almost it.
I had a test in the function appliying droppable class. The only problem is that I can't move a node on top or bottom of another now.
Do you know a way to do that ?

[nhobbes]

Somebody already do something like this ? I can't find a way to disable dropping on a node.

[stworthy]

To disable dropping on a node, try changing its accept property.

Code:

var node = $('#tt').tree('find', nodeId);  // get the node
$(node.target).droppable({accept:'no-accept'});  // change the node's accept property, so that it will not allowed dropping on it