效果图：将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. CSS 小技巧(不定时更新)

    1.Web 文本中的省略号 在Web开发中,对于一种情况很常见.那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题.在今天HTML的标准中并没有相关 ...

  2. 【Android自己定义控件】圆圈交替，仿progress效果

    还是我们自定View的那几个步骤: 1.自己定义View的属性 2.在View的构造方法中获得我们自己定义的属性 3.重写onMesure (不是必须) 4.重写onDraw 自己定义View的属性 ...

  3. 基于cefsharp的用户浏览器

    技术:vc++2015   概述 用于需要制作一个浏览器 winfrom 中浏览器的插件有很多种 如:WebBrowser , Web.kit等 但用于比较稳定 功能齐全的还是cefsharp 详细 ...

  4. MATLAB 程序处理结果出现 NAN 问题

    1)0/0  或者说  任意常数/0  也就是0不能做分母. (nan出现的情况绝大部分是分母出现0了)   若分子为0的情况,(分母不为0),结果也应该是0而非 NAN. 2)如果是 无穷大比无穷大 ...

  5. 【C++】C++中的数组

    目录结构: contents structure [-] 一维数组 数组的定义和初始化 数组元素的访问 数组和指针 多维数组 数组是存放相同类型的容器,数组的大小确定不变,不能随意向数组中添加元素.因 ...

  6. Mssql Server2005中更改sa的用户名的多种方法

    mssql安装上去时默认就是sa用户,大多数用户都会一直使用sa这个用户,这样数据库就存在很大的安全问题了,如果我们能把sa用户名修改,这样安全级别又高了一层哦,下面我们来看修改sa用户名的办法.   ...

  7. Springboot+Mybatis整合PageHelper

    一.全部的gradle引入 // https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-sta ...

  8. 解决Protobuf生成的C#代码命名不规范问题

    起因 通常使用Protobuf的步骤为 定义 .proto 文件 使用 protoc 生成对应语言的代码 以生成C#代码为例,使用如下命令: protoc -I ../protos --csharp_ ...

  9. V-Charts中使用extend属性定制词云图

    [本文出自天外归云的博客园] 简介 在Vue中使用E-Charts可以用V-Charts,词云图在V-Charts官网中介绍比较简单,如果想更多定制的话,官网上说要在extend属性中进行扩展. V- ...

  10. Centos7下安装Oracle11g r2图形化界面数据库

    我的centos7是在VMware下安装的,安装Oracle安装了好久好久,最开始的时候在网上找的两个文章,按照步骤装,有一篇写着装的时候有灰色的竖线,直接按space键或者鼠标右键closed关闭掉 ...