jQuery EasyUI 树形菜单 - 树形菜单拖放控制

jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合，其中包括了丰富的 UI 控件和工具库，其中之一就是树形菜单插件。树形菜单拖放控制是 EasyUI 树形菜单插件的一个常用功能。

实现步骤

引入 EasyUI 库和相关 CSS 文件

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.7/themes/bootstrap/easyui.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.7/themes/icon.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.7/jquery.easyui.min.js"></script>

创建树形菜单

<ul id="my-tree">
    <li data-options="id:'node1',text:'Node 1'">
        <ul>
            <li data-options="id:'node2',text:'Node 2'"></li>
            <li data-options="id:'node3',text:'Node 3'"></li>
        </ul>
    </li>
</ul>

初始化树形菜单

$('#my-tree').tree({
    dnd: true // 启用拖放功能
});

监听拖放事件并实现拖放逻辑

$('#my-tree').tree({
    dnd: true,
    onBeforeDrag:function(node){        
        if(node.id == 'node1'){ // 禁止拖动根节点
            return false;
        }
    },
    onBeforeDrop:function(targetNode,sourceNode,point){
        if(targetNode.id == 'node1'){ // 禁止将节点拖进根节点
            return false;
        }
        return true;
    },
    onDrop:function(targetNode,sourceNode,point){
        alert(targetNode.text + point + sourceNode.text); // 拖放成功后弹出信息
    }
});

参数说明

dnd

启用或禁用拖放功能，默认值为 false。

onBeforeDrag

在节点开始拖动之前触发的事件，返回 false 时不允许该节点拖动。

node

要拖动的节点信息。

onBeforeDrop

在节点拖动到目标节点之前触发的事件，返回 false 时不允许该节点拖动到目标节点。

targetNode

目标节点信息。

sourceNode

源节点信息。

point

拖放方式。值可以为 ‘append’、’top’、‘bottom’。

onDrop

在节点拖放完成后触发的事件。