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 ...

随机推荐

Java 基础（六）：循环
循环老生常谈的一个控制流程了,我们在是使用数组和集合的时候,遍历元素的时候经常会用到循环的结构,Java具有非常灵活的三种循环机制: 根据是否知道循环的次数可以为分为while循环,do...whi ...
DOTNET CORE源码分析之ServiceDescriptor
ServiceDescriptor在.net core中的作用就是DI中注入服务元素的描述.每一个元素核心内容部分包括需要注入的服务元素的类型ServiceType,它对应的接口(如果有的话)Impl ...
Head First设计模式——桥接模式
桥接模式桥接模式:不只改变你的实现,也改变你的抽象. 如果有一个电视厂家,遥控器需要升级,电视也需要修改.这种变化部分的封装就适合使用桥接模式,桥接模式通过将实现和抽象放在两个不同的类层次中而使它们 ...
FFmpeg SDK for iOS
FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的跨平台开源计算机程序. 很多平台视频播放器都是使用FFmpeg来开发的,FFmpeg官方并没有为各个平台提供编译好的SDK,所以使 ...
Cisco 综合配置（二）
要求: 1. PC1 属于VLAN10,PC2属于VLAN20,网关:Master Router2. VLAN10.20 的网段为:192.168.10.0/24 . 192.168.20.0/24 ...
React Native升级
几个月前创建了一个版本为0.60.4的项目,现要更新到最新版本0.61.4. 具体可查看 https://facebook.github.io/react-native/docs/upgrading# ...
99%的程序员都在用Lombok，原理竟然这么简单？我也手撸了一个！|建议收藏！！！
罗曼罗兰说过:世界上只有一种英雄主义,就是看清生活的真相之后依然热爱生活. 对于 Lombok 我相信大部分人都不陌生,但对于它的实现原理以及缺点却鲜为人知,而本文将会从 Lombok 的原理出发,手 ...
windows10环境下QtCreator中出现skipping incompatible xxx when searching for xxx 问题解决办法
windows10环境下QtCreator中出现skipping incompatible xxx when searching for xxx 我再QtCreator中想导入一个外部库时,他提示不匹 ...
javascript正则表达式入门先了解这些
前言此内容由学习<JavaScript正则表达式迷你书(1.1版)>整理而来(于2020年3月30日看完).此外还参考了MDN上关于Regex和String的相关内容,还有ECMAScr ...
HDU - 2444 二分图最大匹配之判断二分图+匈牙利算法
题意:第一行给出数字n个学生,m条关系,关系表示a与b认识,判断给定数据是否可以构成二分图,如果可以,要两个互相认识的人住一个房间,问最大匹配数(也就是房间需要的最小数量) 思路:要看是否可以构成二分 ...

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

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

随机推荐

热门专题

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

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