在 jQuery EasyUI 中,通过使用 tree 组件提供的拖放功能,您可以轻松实现树形菜单的拖放控制。以下是一个简单的例子,演示如何启用树形菜单的拖放功能:

1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站([EasyUI 官网](http://www.jeasyui.com/))下载并引入这些文件。

2. 在 HTML 中创建一个容器,用于显示拖放功能的树形菜单:
<div id="dragDropTree"></div>

3. 使用 jQuery EasyUI 的 tree 方法初始化树形菜单,并设置 dragable 属性为 true 启用拖放功能:
<script>
  $(function(){
    // 初始化拖放功能的树形菜单
    $('#dragDropTree').tree({
      data: [{
        id: 1,
        text: 'Node 1',
        children: [{
          id: 11,
          text: 'Node 1.1'
        }, {
          id: 12,
          text: 'Node 1.2'
        }]
      }, {
        id: 2,
        text: 'Node 2',
        state: 'closed',
        children: [{
          id: 21,
          text: 'Node 2.1'
        }, {
          id: 22,
          text: 'Node 2.2'
        }]
      }],
      dragable: true, // 启用拖放功能
      onBeforeDrop: function(target, source, point){
        // 拖放之前触发的事件,返回 false 可以取消拖放操作
        console.log('拖放之前:', target, source, point);
        return true;
      },
      onDrop: function(target, source, point){
        // 拖放完成时触发的事件
        console.log('拖放完成:', target, source, point);
      }
    });
  });
</script>

在这个例子中,我们使用 tree 方法初始化了一个树形菜单,并通过 dragable 属性设置为 true 启用了拖放功能。onBeforeDrop 事件在拖放之前触发,您可以在这里进行一些拖放前的验证。onDrop 事件在拖放完成后触发,您可以在这里执行一些操作。

您可以根据实际需求调整其他属性以及树形结构。


转载请注明出处:http://www.zyzy.cn/article/detail/13137/jQuery EasyUI