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. centos7安装部署opentsdb2.4.0

    写在前面 安装HBase 在HBase中创建表结构 安装配置并启动opentsdb 写在前面 最近因为项目需要在读opentsdb的一部分源码,后面会做个小结分享出来.本人是不大喜欢写这种安装部署的文 ...

  2. 一段很简单的PHP代码，用于手机拨号

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Fink SQL 实践之OVER窗口

    问题场景 Flink SQL 是一种使用 SQL 语义设计的开发语言,用它解决具体业务需求是一种全新体验,类似于从过程式编程到函数式编程的转变一样,需要一个不断学习和实践的过程.在看完了 Flink ...

  4. HBU-数据库第五周作业

    第五周数据库作业 注意 MySQL的数据库名.表名.列名.别名大小写规则是这样的: 1.数据库名与表名是严格区分大小写的: 2.表的别名是严格区分大小写的: 3.列名与列的别名在所有的情况下均是忽略大 ...

  5. STL篇--list容器

    list容器: 1.list 容器 的本质就是双向环形链表,最后一个节点刻意做成空节点,符合容器的左闭右开的原则2.list 的迭代器 是一个智能指针,其实就是一个类,通过操作符重载模拟各种操作(++ ...

  6. dom&JavaScript&Jquery

    目录 dom&JavaScript&Jquery 建节点 添加节点 删除节点: 替换节点: 属性节点 获取值操作 class的操作 指定CSS操作 操作节点 获取input用户输入 操 ...

  7. css第二波

    目录 css第二波 盒子模型 浮动 三种取值 清除浮动 浮动页面布局 溢出 定位 相对定位 relative(相对定位) 绝对定位 absolute(绝对定位) 固定定位 fixed(固定) 模糊框 ...

  8. hdu1548 奇怪的电梯 dfs dijkstra bfs都可以，在此奉上dfs

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/5706/ 简单的规定深度进行搜索,代码如下: #include<bits/stdc++.h> usin ...

  9. 从字节码来分析，i++与++i区别

    ++/-- 是一种特殊的算术运算符,在算术运算符中需要两个操作数来进行运算,而自增自减运算符是一个操作数 前缀自增(++a):先进行自增运算,再进行表达式运算: 后缀自增(a++):先进行表达式运算, ...

  10. 力软敏捷框架7.0.6 葡萄城报表升级到ar14版本

    忙了两天终于搞定升级到ar14版本,坑无数,终于算全部解决,在这里做一个小结. 1.第一步去掉框架中原本集成的ar13部分(吐槽一下应该是对12的集成). 首先去掉licenses.licx文件. 然 ...