jEasyUI tree menu drag and drop control


When using the Tree plug-in in an application, the drag and drop functionality is required to allow the user to change the position of nodes. To enable drag and drop operations, all you need to do is set the 'dnd' property of the Tree plugin to true.

109.png

Create tree menu (Tree)

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

When a drop operation occurs on a tree node, the 'onDrop' event will be triggered and you should do some or more operations , such as saving node status to the remote server, etc. 

	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 jQuery EasyUI instance

jeasyui-tree-tree5.zip