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

随机推荐

Docker 技术系列之安装Docker Desktop for Mac
终于要进入到Docker技术系列了,感谢大家的持续关注. 为什么要选择Docker?因为Docker 轻巧快速,提供了可行.经济.高效的替代方案.举个例子,安装Nginx,Mysql,Redis等常用 ...
（转）windows宿主机，ubuntu虚拟机下的上网设置（有线网络和无线网络）
转自:http://hi.baidu.com/puppywst/item/d9f73734856e2af32684f4e3 虚拟机下ubuntu共享方式上网: 有线网络在有线网络的条件下,vmwar ...
网络安全从入门到精通（第一章-1）Web服务器通信原理
本文内容 IP地址域名端口 HTTP协议从访客角度看网页浏览器流程常见服务器系统路径 Web容器常见的Web容器 !!!多动手,多动手,只看只听是不行的!!! 1,IP地址:就是计算机在互 ...
Scikit-Learn 源码研读（第二期）基类的实现细节
目录 BaseEstimator `get_params` `set_params` ClassifierMixin RegressorMixin 检查传入的对象检查样本数和权重系数实现$R^2$ ...
Css五种定位之间的区别
##CSS 定位机制## CSS 有三种基本的定位机制:普通流.浮动流和定位流. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级 ...
python爬虫常用库和安装 -- windows7环境
1:urllib python自带 2:re python自带 3:requests pip install requests 4:selenium 需要依赖chrome ...
R之Shiny学习笔记
官方教程:https://shiny.rstudio.com/tutorial/ 中文教程:http://yanping.me/shiny-tutorial/ 英文教程:https://deanatt ...
SpringBoot启动项目之后，访问页面出现Whitelabel Error Page
话说万事具备,只欠东风- 蹭闲暇时来跑个SpringBoot项目玩玩,把一切配置依赖准备就绪之后打算运行项目. Staring...... 接着,在浏览器输入地址 localhost:8080/hel ...
【笔记3-31】Python语言基础-列表list
列表list my_list = [1, 2, 3, 4, 5] 索引index my_list[0] 获取列表长度 len(my_list) 切片 [起始:结束:步长] my_list[1:3:2] ...
OpenCV-Python ORB(面向快速和旋转的BRIEF) | 四十三
目标在本章中,我们将了解ORB的基础知识理论作为OpenCV的狂热者,关于ORB的最重要的事情是它来自" OpenCV Labs".该算法由Ethan Rublee,Vinc ...

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

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

随机推荐

热门专题

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

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