Easy Tutorial
❮ Jeasyui Datagrid Datagrid2 Jeasyui Datagrid Datagrid17 ❯

jQuery EasyUI Tree Menu - Tree Menu Drag and Drop Control

When using the Tree plugin in an application, the drag and drop functionality requires allowing 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 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 actions, such as saving the node state 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 Example

jeasyui-tree-tree5.zip

❮ Jeasyui Datagrid Datagrid2 Jeasyui Datagrid Datagrid17 ❯