效果图：将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. Java内存管理：Java内存区域 JVM运行时数据区

    转自:https://blog.csdn.net/tjiyu/article/details/53915869 下面我们详细了解Java内存区域:先说明JVM规范定义的JVM运行时分配的数据区有哪些, ...

  2. 分析轮子（七）- RandomAccess.java

    1:还是先上一个类的继承关系比较图吧! 2:看一下 RandomAccess.java 的源码,空空如也,什么都没有,那她有什么用处呢? /** * Marker interface used by ...

  3. RabbitMQ 学习专栏

    RabbitMQ 官网:http://www.rabbitmq.com/ 原创博文 1.揭开消息中间件RabbitMQ的神秘面纱 2. RabbitMQ 服务器之下载安装 3. RabbitMQ 之修 ...

  4. 解决通过Nginx转发的服务请求头header中含有下划线的key，其值取不到的问题

    1. 问题 由于在http请求头的头部中设置了一些自定义字段,刚好这些字段中含有下划线,比如bundle_name这种,后端在进去获取头部信息时,发现取不到对应的值 2. 原因及解决办法 分析 首先看 ...

  5. Troubleshooting Scheduler Autotask Issues (Doc ID 1561498.1)

    In this Document   Purpose   Troubleshooting Steps   References APPLIES TO: Oracle Database - Enterp ...

  6. [转]decorators.xml的用法

    原文地址:https://blog.csdn.net/laozhuxiao/article/details/54342121 简介: sitemesh应用Decorator模式,用filter截取re ...

  7. Linux中rz和sz命令用法详解

    http://www.111cn.net/sys/linux/67810.htm 在linux中rz 和 sz 命令允许开发板与主机通过串口进行传递文件了,下面我们就来简单的介绍一下rz 和 sz 命 ...

  8. Linux shell去除字符串中所有空格

    Linux shell去除字符串中所有空格 echo $VAR | sed 's/ //g'

  9. shell切分字符串到数组

    shell切分字符串到数组 问题: 对于’aa,bb,cc,dd,ee’这样的字符串输出采用,分隔开的aa bb cc dd ee aa:bb is ok:/home/work按照":&qu ...

  10. mybatis 映射器（mappers） 配置说明 加载映射文件方式

    映射器(mappers) 既然 MyBatis 的行为已经由上述元素配置完了,我们现在就要定义 SQL 映射语句了.但是首先我们需要告诉 MyBatis 到哪里去找到这些语句. Java 在自动查找这 ...