jQuery EasyUI Tree Menu -Tree Menu Drag and Drop Control

When using the Tree plugin in an application, the drag and drop features are required to allow users to change node positions. To enable drag and drop operations, all you need to do is set the 'dnd' property of the Tree plugin to true.

Create a 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 perform some or more operations, such as saving the node state to a 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 Examples

jeasyui-tree-tree5.zip