效果图：将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. 【ASP.NET Core】EF Core - “影子属性”

    有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. 老周觉得,视频直播可能会好一些,虽然我的水平一般,不过直播时,老周 ...

  2. 人人网框架导入uidGenerator的ID生成方式

    人人网框架导入uidGenerator的ID生成方式 2019-03-11 LIUREN    SpringBoot2.0  uidGenerator  SpringBoot2.0  uidGener ...

  3. error running git

    I ran xcode-select --install and everything worked for me.

  4. VTK使用矢量数据弯曲几何体

    vtkWarpVector is a filter that modifies point coordinates by moving points along vector times the sc ...

  5. 【redis持久化】redis持久化理解

    1.以下内容仅为个人理解和总结,仅供参考,万万不可全盘真信,内容会进行实时改进和修正 2.redis持久化: 参考链接1.https://redis.io/topics/persistence  -- ...

  6. MySql 建表、添加字段、修改字段、添加索引SQL语句写法及SQL索引

    ---------添加索引方法--------- .添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `c ...

  7. Git把Tag推送到远程仓库

    # 创建附注标签 $ git tag -a v0.1.2 -m “0.1.2版本” 列出标签 $ git tag # 在控制台打印出当前仓库的所有标签 $ git tag -l ‘v0.1.*’ # ...

  8. 公用表表达式(CTE)

    在编写T-SQL代码时,往往需要临时存储某些结果集.前面我们已经广泛使用和介绍了两种临时存储结果集的方法:临时表和表变量.除此之外,还可以使用公用表表达式的方法.公用表表达式(Common Table ...

  9. return返回两个三元表达式的和，返回不正确，同样要注意在JavaScript中，也是如此

    public string b() { string b = ""; "; } public int c() { public string b() { string b ...

  10. 【Linux】解决"no member named 'max_align_t'

    编译遇到错误: /usr/bin/../lib/gcc/x86_64-linux-gnu/5.4.1/../../../../include/c++/5.4.1/cstddef:51:11: erro ...