javascript入门之 zTree（十二托拽事件（二））

1.逻辑可能有不完善的地方，如果发现，请指出。

<!DOCTYPE html>

<HTML>

<HEAD>

   <TITLE> ZTREE DEMO - drag & drop</TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta lang="zh">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">

    <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../bower_components/ztree/js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>

    <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>

    <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.exedit-3.5.js"></script>

   <SCRIPT type="text/javascript">

      var setting = {

         edit: {

             drag:{

                    autoExpandTrigger: true,

                    prev: dropPrev,                               //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作

                    next: dropNext,                               //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作

                    inner: dropInner                              //拖拽到目标节点时，设置是否允许成为目标节点的子节点

                },

            enable: true,

            showRemoveBtn: true,                                //设置是否显示删除按钮

            showRenameBtn: true                                 //设置是否显示编辑名称按钮

         },

         data: {

            simpleData: {

               enable: true

            }

         },

         callback: {

            beforeDrag: beforeDrag,                             //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作

            beforeDrop: beforeDrop,                             //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作

                onDrag: onDrag,                                     //侦听beforeDrag回调结果，确定是否允许drag

                drop: onDrop                                        //侦听beforeDrop回调结果，确定是否允许drop

         }

      };

      var nodes =[

         { id:1, pId:0, name:"1", open:true,childOuter:false},                       //禁止子结点移走

            { id:13, pId:1, name:"1-3"},

            { id:11, pId:1, name:"1-1",dropInner:false},                                //不成为父结点

         { id:12, pId:1, name:"1-2", open:true,dropRoot:false},                      //不成为根结点

         { id:121, pId:12, name:"1-2-1"},

         { id:122, pId:12, name:"1-2-2"},

         { id:123, pId:12, name:"1-2-3"},

         { id:13, pId:1, name:"1-3", open:true, drag:false,childOrder:false,dropInner:false},        //不允许 被托拽/子结点排序/成为该结点 的子结点

         { id:131, pId:13, name:"1-3-1", drag:false},                                //不允许被托拽

         { id:132, pId:13, name:"1-3-2", drag:false},                                //不允许被托拽

         { id:133, pId:13, name:"1-3-3"},

         { id:2, pId:0, name:"2", open:true},

         { id:21, pId:2, name:"2-1"},

         { id:22, pId:2, name:"2-2", open:true, drop:false},                         //不允许托拽到此处

         { id:221, pId:22, name:"2-2-1"},

         { id:222, pId:22, name:"2-2-2"},

         { id:223, pId:22, name:"2-2-3"},

         { id:23, pId:2, name:"2-3"}

      ];

        function beforeDrag(treeId, treeNodes) {                                        //如果该结点不允许drag 或者 该结点的父结点不允许子结点外出，则返回false

            for (var i=0,l=treeNodes.length; i<l; i++) {

                if (treeNodes[i].drag === false) {

                    alert('被托拽结点不允许操作');

                    return false;

                }

            }

            alert('被托拽结点允许操作');

            return true;

        }

      function beforeDrop(treeId, treeNodes, targetNode, moveType) {                  //判断是否允许被托拽到此地

          alert('托拽事件检测中');

            return true;

      }

        function dropPrev(treeId, nodes, targetNode) {                                     //如果目标结点允许待托拽结点到自己前面，则返回true

            var pNode = targetNode.getParentNode();

            if (pNode && pNode.dropInner === false) {

                return false;

            } else {

                for (var i=0,l=nodes.length; i<l; i++) {                                    //遍历所有结点，三个条件 1.存在父结点 2.托拽结点和目标结点的父结点不相同 3.托拽结点的父结点不允许外出

                                                                                            //只要三者不同时成立，便可以移动到目标结点的前面

                    var curPNode = nodes[i].getParentNode();

                    if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {

                        return false;

                    }

                }

            }

            return true;

        }

        function dropInner(treeId, nodes, targetNode) {

            if (targetNode && targetNode.dropInner === false) {

                return false;

            } else {

                for (var i=0,l=nodes.length; i<l; i++) {

                    if (!targetNode && nodes[i].dropRoot === false) {                       //1.不存在目标结点 2.托拽结点不能成为根结点  二者同时满足便返回false

                        return false;

                    } else if (nodes[i].parentTId && nodes[i].getParentNode() !== targetNode && nodes[i].getParentNode().childOuter === false || !targetNode.drop) {

                                                                                            //1.存在目标结点 2.托拽结点的根结点不是目标结点 3.托拽结点的根结点不允许外出

                                                                                            //三者同时成立则返回false

                                                                                            //目标结点不允许托拽到此处返回false

                        return false;

                    }

                }

            }

            return true;

        }

        function dropNext(treeId, nodes, targetNode) {

            var pNode = targetNode.getParentNode();

            if (pNode && pNode.dropInner === false) {                                       //目标结点的根结点不允许进入子结点

                return false;

            } else {                                                                        //同dropPrev

                for (var i=0,l=nodes.length; i<l; i++) {

                    var curPNode = nodes[i].getParentNode();

                    if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {

                        return false;

                    }

                }

            }

            return true;

        }

        function onDrag(event, treeId, treeNodes) {

        }

        function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {

        }

      $(document).ready(function(){

         $.fn.zTree.init($("#sys"), setting, nodes);

      });

   </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

   <div class="zTreeDemoBackground left">

      <ul id="sys" class="ztree"></ul>

   </div>

</div>

</BODY>

</HTML>

javascript入门之 zTree（十二托拽事件（二））的更多相关文章

javascript入门之 zTree（十一托拽事件（一））
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
javascript入门之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
javascript入门之 zTree（十三移动/复制事件）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
javascript入门之 zTree（十四增删查改）（二）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
javascript入门之 zTree（十四增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
javascript入门之 ztree（二标准json数据）
1.代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </T ...
javascript入门之 ztree (九单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
javascript入门之 ztree (八一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
javascript入门之 ztree(七结点的查询)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

activiti工作流解决历史批注中文乱码
/** * 根据流程实例查询流程的批注信息 * * @param processInstanceId * @return */ private List<Comment> findComm ...
CentOS7使用tar.gz方法安装php7.2.8
软件:VMware 系统版本:CentOS7 1.检查系统里是否有安装的PHP包,如果有的话先删除 [root@localhost ~]# yum list installed | grep php ...
[Alg] 文本匹配-单模匹配-KMP
1. 暴力求解如下图所示.蓝色的小三角表示和sequence比较时的开始字符,绿色小三角表示失败后模式串比对的开始字符,红色框表示当前比较的字符对. 当和模式串发生不匹配时,蓝色小三角后移一位,绿色 ...
[Dynamic Programming]动态规划之背包问题
动态规划之背包问题例题现有4样物品n = ['a', 'b', 'c', 'd'],重量分别为w = [2, 4, 5, 3],价值分别为v = [5, 4, 6, 2].背包最大承重c = 9. ...
VScode配置CMD本地运行环境(2.0)
VScode配置CMD本地运行环境(2.0) 官方Task.json说明完整的Task.json配置信息 Task.json预定义变量看了很多网上的教程都说需要下载VScode的python插件, ...
插了带蠕虫的U盘后，文件不见了怎么快速恢复
朋友插了别人U盘,电脑中毒,找到我,在网上找了一些教程,好多都是用杀软的,懒的下,亲测本教程简单有效首先,我们创建了一个reg文件(注册表文件),如下, 利用REG文件我们可以直接对注册表进行任何修 ...
动态规划-区间dp-Palindrome Removal
2019-11-09 10:31:09 问题描述: 问题求解: n = 100,典型的O(n ^ 3)的动规问题.一般来说这种O(n ^ 3)的问题可以考虑使用区间dp来解决. 区间dp是典型的三层结 ...
Redis总结--【持续更新】
# 什么是Redis? Redis 是完全开源免费的,是一个高性能的key-value内存数据库,读的速度是110000次/s,写的速度是81000次/s 它有以下三个特点: Redis不 ...
TensorFlow系列专题（三）：深度学习简介
一.深度学习的发展历程深度学习的起源阶段深度学习的发展阶段深度学习的爆发阶段二.深度学习的应用自然语言处理语音识别与合成图像领域三．参考文献一.深度学习的发展历程作为机器学习最 ...
树莓派3B+之Raspbian系统的安装
概述因为之前一段时间在研究物联网的原因,所以对树莓派这个东西早就有所耳闻.在我的印象里,树莓派几乎无所不能,它可以用来学编程. 搞物联网. 做服务器,甚至还能用它来进行渗透测试.终于,没禁的住诱惑, ...

javascript入门 之 zTree（十二 托拽事件（二））

javascript入门 之 zTree（十二 托拽事件（二））的更多相关文章

随机推荐

热门专题

javascript入门之 zTree（十二托拽事件（二））

javascript入门之 zTree（十二托拽事件（二））的更多相关文章