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（十二 托拽事件（二））的更多相关文章

  1. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  2. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  3. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  4. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  5. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  6. javascript入门 之 ztree（二 标准json数据）

    1.代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </T ...

  7. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  8. javascript入门 之 ztree (八 一系列鼠标事件)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  9. javascript入门 之 ztree(七 结点的查询)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. vue的$message（提示框换行）

    之前一直在搜怎么让提示框的文字换行,网上搜到的基本都是使用 ‘ /n ’,使用无效,也试了css换行,本来想用弹窗自己编辑html内容,还好回去官网看了一下: let arr = ['测试一', '测 ...

  2. 解决mongo单文档超过16M

    mongodb导入大文件的数据时,导入一小部分后,提示lost connect,失去连接.mongo文件有6.3G,网上查了一下,原来Mongo对单次处理好像有大小限制(16m),所以大文件会出问题, ...

  3. 【Python】2.13学习笔记 数学函数和随机函数

    我死了,今天看课看过头了,忘了发作业,被典明批评 而且化学作业还是瞎搞的,直接就发了 我觉得我已经提前死亡了,现在不死亡,开学也会的 函数 挺容易的,有很多语言之间重合的部分 注意 在使用某些数学函数 ...

  4. CentOS7使用tar.gz方法安装php7.2.8

    软件:VMware 系统版本:CentOS7 1.检查系统里是否有安装的PHP包,如果有的话先删除 [root@localhost ~]# yum list installed | grep php ...

  5. Mybatis总结一之SQL标签方法

    ---恢复内容开始--- 定义:mapper.xml映射文件中定义了操作数据库的sql,并且提供了各种标签方法实现动态拼接sql.每个sql是一个statement,映射文件是mybatis的核心. ...

  6. 对tf.nn.softmax的理解

    对tf.nn.softmax的理解 转载自律者自由 最后发布于2018-10-31 16:39:40 阅读数 25096  收藏 展开 Softmax的含义:Softmax简单的说就是把一个N*1的向 ...

  7. datetime和time

    datetime和time 1.datetime模块 import datetimenow = datetime.datetime.now() #时间对象print(now,type(now))pri ...

  8. Mysql常用sql语句（一）- 操作数据库

    21篇测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html ...

  9. P5020 货币系统 题解

    原题链接 简要题意: 求一个长度最小的货币系统与给出的货币系统等价.求这个货币系统的长度.等价的定义详见题目,不再赘述. 本文可能用到一些集合论,请放心食用. 算法一 \(n=2\) 时,只需判断两个 ...

  10. WEB应用之httpd基础入门（四）

    前文我们聊到了httpd的虚拟主机实现,状态页的实现,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12570900.html:今天我们来聊一聊后面的常用基础配 ...