效果图：将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. 关于TF(词频) 和TF-IDF(词频-逆向文件频率 )的理解

    ##TF-IDF TF(词频):  假定存在一份有N个词的文件A,其中‘明星‘这个词出现的次数为T.那么 TF = T/N; 所以表示为: 某一个词在某一个文件中出现的频率. TF-IDF(词频-逆向 ...

  2. 实战UITableview深度优化

    演示项目下载地址:https://github.com/YYProgrammer/YYTableViewDemo 项目里的低性能版是常规写法实现的tableview,高性能版是做了相关优化后的tabl ...

  3. animate.css做点赞效果

    花了一晚上研究出来的,感觉还行吧... 代码: 源码下载: http://image.niunan.net/animatedemo.zip

  4. PHPStorm + Homestead + Xdebug + Chrome Xdebug Helper 调试配置

    话说 PHPStorm 写起代码来非常带感,各种提示补全和纠错,以及在 L5 中的命名空间功能更是强大到感动(新建类自动添加命名空间,自动引入命名空间,返回参数命名空间纠正等等).当然它的调试功能更是 ...

  5. (转)常用的 TCP KeepAlive 参数

    socket编程里通过setsockopt系统调用针对单独的socket进行设置,可以覆盖Linux Kernel的选项.举个例子,以我的系统默认设置为例,kernel默认设置的tcpkeepaliv ...

  6. Guava Cache用法介绍<转>

    Guava Cache是在内存中缓存数据,相比较于数据库或redis存储,访问内存中的数据会更加高效.Guava官网介绍,下面的这几种情况可以考虑使用Guava Cache: 愿意消耗一些内存空间来提 ...

  7. Android 8 设置蓝牙名称 流程

    记录android 8设置蓝牙名称的流程. packages/apps/Settings/src/com/android/settings/bluetooth/BluetoothDeviceRenam ...

  8. Gin框架初识

    一.安装 使用go下载gin库,命令行输入:go get github.com/gin-gonic/gin ,一般使用需要的依赖: import "github.com/gin-gonic/ ...

  9. 【QT】QT更改构建目录

    菜单“工具”-“选项”. Qt Creator怎样更改默认构建目录_百度经验 https://jingyan.baidu.com/article/6181c3e0b9d170152ef153af.ht ...

  10. 美客分销商城-接力购源码系统，全开源代码可进行二次开发，微信小程序分销商城

    1. 准备服务器.域名(SSL证书).认证的微信小程序.微信支付商户号 2. 系统功能简介 三.演示案例,微信扫码查看 四.后台管理系统 五. 全套开源源码,进行二次开发 六.本系统完美运营,全套代码 ...