效果图：将tree节点拖动到指定的DIV中，结果显示节点的id和text

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Drag Drop Tree Nodes - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Drag Drop Tree Nodes<input type="button" onclick="enableDragg();" value="允许拖动" /><input type="button" onclick="    disableDragg();" value="禁止拖动" /></h2>

    <p>Press mouse down and drag a node to another position.</p>

    <div style="margin: 20px 0;"></div>

    <div class="easyui-panel" style="padding: 5px">

        <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:false" id="tree"></ul>

    </div>

    <div id="drop" style="height: 200px; border: 1px green solid; margin-top: 5px;"></div>

</body>

</html>

<script type="text/javascript">

    $(function () {

        $('#drop').droppable({

            onDrop: function (e, source) {

                var node = $('#tree').tree('getNode', source);

                $(this).append("<div>node.id:" + node.id + ", node.text:" + node.text + "</div>");

            }

        });

        $('#tree').on({

            mouseover: function (e) {

                var target = e.target;

                if (target.tagName == 'SPAN') target = target.parentNode;

                $(target).draggable({

                    revert: true,

                    proxy: 'clone',

                    disabled: false

                })

            },

            click: function (e) {

                var target = e.target;

                if (target.tagName == 'SPAN') target = target.parentNode;

                if (target.tagName == 'LI') target = $(target).find('div:first')[0];

                $(this).tree('toggle',target);

            }

        });

    });

    function enableDragg() {

        $('.tree-node').draggable({

            revert: true,

            proxy: 'clone',

            disabled: false

        });

    };

    function disableDragg() {

        $('.tree-node').draggable({

            disabled: true

        });

    }

</script>

说明：

使用“允许拖动”按钮进行设置拖动时需要在树加载后才生效

使用on方式设置则不需要等待树加载完成即可，但测试中发现单击展开/收缩节点功能失效，加了个click方法，还是要双击才生效，需要改进。

EasyUI Tree节点拖动到指定容器的更多相关文章

  1. 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法

    在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...

  2. Easyui Tree方法扩展 - getLevel(获取节点级别)

    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...

  3. EasyUI Tree判断节点是否是叶

    方法1:  $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是 方法2:官方文档中: ...

  4. 原创: EasyUI Tree 最后一级 节点 横向排列

    原创: EasyUI  Tree 最后一级 节点 横向排列 转载请指明出处 必须要写在: onLoadSuccess 事件中 ddAuthTree.tree({ lines: true, checkb ...

  5. 【原】无脑操作：EasyUI Tree实现左键只选择叶子节点、右键浮动菜单实现增删改

    Easyui中的Tree组件使用频率颇高,经常遇到的需求如下: 1.在树形结构上,只有叶子节点才能被选中,其他节点不能被选中: 2.在叶子节点上右键出现浮动菜单实现新增.删除.修改操作: 3.在非叶子 ...

  6. easyui Tree模拟级联勾选cascadeCheck，节点选择，父节点自动选中，节点取消，父节点自动取消选择，节点选择，所有子节点全部选择，节点取消，所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  7. EasyUI tree 选中父节点子节点全部选中，选中子节点父节点不选中

    需求:EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中 效果:   /**   * 给树增加onCheck事件,首先使用cascadeCheck:false属性禁止全选,   ...

  8. Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径

    Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...

  9. easyui tree扩展tree方法获取目标节点的一级子节点

    Easyui tree扩展tree方法获取目标节点的一级子节点 /* 只返回目标节点的第一级子节点,具体的用法和getChildren方法是一样的 */ $.extend($.fn.tree.meth ...

随机推荐

  1. SCF: 简单配置门面[转]

    原文:https://blog.csdn.net/koqizhao/article/details/82178100 Simple Configuration Facade :简单配置门面  是 代码 ...

  2. NOIP2010提高组 机器翻译

    OJ提交地址:https://www.luogu.org/problemnew/show/P1540 http://noi.openjudge.cn/ch0112/07/ 总时间限制: 1000ms  ...

  3. Linux 修改时区

    CentOS 7修改方式如下: # lsb_release -a  --查看系统版本-CentOS Linux release 7.6 # timedatectl     --查看当前系统时区# ls ...

  4. 转载：MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决

    MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决 把自己的项目从MVC4升级到了MVC5,结果问题一大堆,View的设计环境出现了"当前上下文中不存在Vi ...

  5. 先从一个 libev 的 demo 入手

    最近想研究下 libev 这个网络库,所以先从官方文档一个最简单的 demo 开始,代码如下: //io.c // a single header file is required #include ...

  6. 深入理解Linux内存分配

    深入理解Linux内存分配 为了写一个用户层程序,你也许会声明一个全局变量,这个全局变量可能是一个int类型也可能是一个数组,而声明之后你有可能会先初始化它,也有可能放在之后用到它的时候再初始化.除此 ...

  7. CentOS 6.5 x64下查看服务版本

    1.查看服务是否是64位 [root@Yimmei ~]# getconf LONG_BIT 642.查看服务器版本信息 [root@Yimmei ~]# lsb_release -a LSB Ver ...

  8. Autohotkey window 下宏键盘、宏命令开发入门

  9. 使用xshell+xmanager+pycharm搭建pytorch远程调试开发环境

    1. 相关软件版本 xshell: xmanager: pycharm: pycharm破解服务器:https://jetlicense.nss.im/ 2. 将相应的软件安装(pojie好) a&g ...

  10. Atitit s2018.6 s6 doc list on com pc.docx Atitit s2018.6 s6 doc list on com pc.docx  Aitit algo fix 算法系列补充.docx Atiitt 兼容性提示的艺术 attilax总结.docx Atitit 应用程序容器化总结 v2 s66.docx Atitit file cms api

    Atitit s2018.6 s6  doc list on com pc.docx Atitit s2018.6 s6  doc list on com pc.docx  Aitit algo fi ...