EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: nhobbes on August 07, 2012, 12:57:58 AM

Title: Tree and action on move node
Post by: nhobbes on August 07, 2012, 12:57:58 AM

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

Title: Re: Tree and action on move node
Post by: stworthy on August 07, 2012, 05:25:19 PM

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>

Title: Re: Tree and action on move node
Post by: nhobbes on August 08, 2012, 01:19:42 AM

Thanks a lot for your answer. It works fine.

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

Title: Re: Tree and action on move node
Post by: nhobbes on August 08, 2012, 02:05:14 AM

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 ?

Title: Re: Tree and action on move node
Post by: nhobbes on August 26, 2012, 11:30:09 PM

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

Title: Re: Tree and action on move node
Post by: stworthy on August 27, 2012, 02:28:39 AM

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