<!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: {

            enable: true,

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

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

         },

         data: {

            simpleData: {

               enable: true

            }

         },

         callback: {

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

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

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

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

         }

      };

      var nodes =[

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

         { id:11, pId:1, name:"1-1"},

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

         { 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},                         //不允许被托拽

         { 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) {                                        //判断被选中的结点是否允许托拽

         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('托拽事件检测中');

            var state = targetNode ? targetNode.drop !== false : true;

            if (!state){

                alert('托拽目的地结点不允许此操作');

            }else{

                alert('托拽目的地结点允许此操作');

            }

            return state;

      }

      function drag() {

        }

        function drop() {

        }

      function setCheck() {

         var zTree = $.fn.zTree.getZTreeObj("sys"),                                      //将checkbox的值传到zTree树内部

         isCopy = $("#copy").attr("checked"),

         isMove = $("#move").attr("checked"),

         prev = $("#prev").attr("checked"),

         inner = $("#inner").attr("checked"),

         next = $("#next").attr("checked");

         zTree.setting.edit.drag.isCopy = isCopy;

         zTree.setting.edit.drag.isMove = isMove;

         zTree.setting.edit.drag.prev = prev;

         zTree.setting.edit.drag.inner = inner;

         zTree.setting.edit.drag.next = next;

      }

      $(document).ready(function(){

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

         setCheck();

         $("#copy").bind("change", setCheck);                                            //利用bind函数把copy,move,perv,inner,next复选框的改变事件绑定到setCheck函数

         $("#move").bind("change", setCheck);

         $("#prev").bind("change", setCheck);

         $("#inner").bind("change", setCheck);

         $("#next").bind("change", setCheck);

      });

   </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

   <div class="zTreeDemoBackground left">

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

   </div>

   <div class="right">

        <li><p>基本拖拽设置：<br/>

            <input type="checkbox" id="copy" class="checkbox first" checked /><span>允许复制</span>

            <input type="checkbox" id="move" class="checkbox " checked /><span>允许移动</span><br/>

        </li>

        <li><p>拖拽相对位置设置：<br/>

            <input type="checkbox" id="prev" class="checkbox first" checked /><span>prev</span>

            <input type="checkbox" id="inner" class="checkbox " checked /><span>inner</span>

            <input type="checkbox" id="next" class="checkbox " checked /><span>next</span><br/>

        </li>

   </div>

</div>

</BODY>

</HTML>

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

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

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

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

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

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

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  4. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

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

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

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

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

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

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

  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. element中的树形组件，如何获取父级菜单的id

    一般多选的树形组件,使用getCheckedNodes()方法只能获取到本级的菜单id,只有在子菜单全部选中的情况下才会选中上级.但我们想要不全选中子级的情况下也要获取它的上级,甚至上上级等,怎么办呢 ...

  2. dict的常用方法

    注:dic表示定义的一个字典变量,如:dic = {'name': 'shawn', 'age': 18} 增: 1.  dic['love'] = 'girl'  直接通过新的键值对进行添加 dic ...

  3. linux无文件执行— fexecve 揭秘

    前言 良好的习惯是人生产生复利的有力助手. 继续2020年的flag,至少每周更一篇文章. 无文件执行 之前的文章中,我们讲到了无文件执行的方法以及混淆进程参数的方法,今天我们继续讲解一种linux上 ...

  4. Natas8 Writeup（常见编码、php函数）

    Natas8: 同样给了php源码,审计源码,发现给了一个预设参数encodedSecret,以及一个加密函数encodeSecret, 该函数将secret参数先进行base64编码.然后用strr ...

  5. Jenkins+Ant+JMeter集成

    Tomcat是jenkins运行的容器,jenkins实际上是依赖于Tomcat才能启动的.Jenkins可以调度ant的脚本. Ant和maven类似,maven是执行pom文件,ant是执行bui ...

  6. jvm 性能调优工具之 jstat 命令详解

    Jstat名称:Java Virtual Machine statistics monitoring tool 官方文档:https://docs.oracle.com/javase/1.5.0/do ...

  7. vscode如何配置debug,python正则表达式如何匹配括号,关于python如何导入自定义模块

    关于vscode如何配置debug的问题: 1.下载安装好python,并且配置好 环境变量 2.https://www.cnblogs.com/asce/p/11600904.html 3.严格按照 ...

  8. 推荐一款优秀的web自动化测工具

    在业务使用的自动化测试工具很多.有开源的,有商业化的,各有各得特色,各有各得优点!下面我就介绍几个我用过的一款非常优秀的国产自动化测试工具.在现有的自动化软件当中,都是以元素的name.id.xpat ...

  9. Ubuntu16.04安装QQ机器人

    Ubuntu安装QQ机器人 看了看现在QQ机器人似乎只有酷Q机器人有Docker可以在linux上运行了 那就k开始装酷Q机器人,资源占用也不是很大,大概占用180M内存吧 安装酷Q HTTP 首先安 ...

  10. Happens-before先行发生原则

    简介 从JDK1.5,java使用新的JSR-133内存模型:JSR-133使用happens-before的概念来阐述操作之间的内存可见性:在JMM中,如果一个操作执行的结果需要对另一个操作可见,那 ...