EasyUI Tree节点拖动到指定容器

最新推荐文章于 2022-10-29 21:40:07 发布

Hello World,

最新推荐文章于 2022-10-29 21:40:07 发布

阅读量4k

点赞数

分类专栏： JQuery EasyUI WEB 文章标签： easyui tree 拖动

本文链接：https://blog.csdn.net/apollokk/article/details/50451436

版权

WEB 同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

JQuery

20 篇文章 0 订阅

订阅专栏

EasyUI

9 篇文章 0 订阅

订阅专栏

效果图：将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" οnclick="enableDragg();" value="允许拖动" /><input type="button" οnclick="    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方法，还是要双击才生效，需要改进。

Hello World,

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI Tree节点拖动到指定容器

效果图：将tree节点拖动到指定的DIV中，结果显示节点的id和text代码： Drag Drop Tree Nodes - jQuery EasyUI Demo Drag Drop Tree Nodes Press mouse down and drag a node to another
复制链接

扫一扫