jQuery EasyUI Tree Menu - Tree Menu Drag and Drop Control

jQuery EasyUI Tree Menu - Tree Menu Drag-and-Drop Control

This section teaches you how to implement drag-and-drop control of the jQuery EasyUI Tree menu.

When using a Tree plug-in in an app, users can change the node position by dragging and placing it. Drag and drop operations are enabled by setting the 'dnd' property of the Tree plug-in to true.

Create a Tree menu

	$('#tt').tree({
		dnd: true,
		url: 'tree_data.json'
	});

When a placement operation occurs on a tree node, the 'onDrop' event is triggered and you should do something or more, such as saving the node state to the remote server side, and so on.

	onDrop: function(targetNode, source, point){
        var targetId = $(target).tree('getNode', targetNode).id;
        $.ajax({
            url: '...',
            type: 'post',
            dataType: 'json',
            data: {
                id: source.id,
                targetId: targetId,
                point: point
            }
        });
    }

Download the jQuery EasyUI instance

jeasyui-tree-tree5.zip