1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4.    <TITLE> ZTREE DEMO - drag & drop</TITLE>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <meta lang="zh">
  7.     <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
  8.     <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
  9.     <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  10.     <script type="text/javascript" src="../bower_components/ztree/js/jquery-1.4.4.min.js"></script>
  11.     <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
  12.     <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
  13.     <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.exedit-3.5.js"></script>
  14.    <SCRIPT type="text/javascript">
  15.  
  16.       var setting = {
  17.          edit: {
  18.             enable: true,
  19.             showRemoveBtn: true,                                //设置是否显示删除按钮
  20.             showRenameBtn: true                                 //设置是否显示编辑名称按钮
  21.          },
  22.          data: {
  23.             simpleData: {
  24.                enable: true
  25.             }
  26.          },
  27.          callback: {
  28.             beforeDrag: beforeDrag,                             //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
  29.             beforeDrop: beforeDrop,                             //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
  30.                 onDrag: drag,                                       //侦听beforeDrag回调结果，确定是否允许drag
  31.                 drop: drop                                          //侦听beforeDrop回调结果，确定是否允许drop
  32.          }
  33.       };
  34.  
  35.       var nodes =[
  36.          { id:1, pId:0, name:"1", open:true},
  37.          { id:11, pId:1, name:"1-1"},
  38.          { id:12, pId:1, name:"1-2", open:true},
  39.          { id:121, pId:12, name:"1-2-1"},
  40.          { id:122, pId:12, name:"1-2-2"},
  41.          { id:123, pId:12, name:"1-2-3"},
  42.          { id:13, pId:1, name:"1-3", open:true, drag:false},                         //不允许被托拽
  43.          { id:131, pId:13, name:"1-3-1", drag:false},                                //不允许被托拽
  44.          { id:132, pId:13, name:"1-3-2", drag:false},                                //不允许被托拽
  45.          { id:133, pId:13, name:"1-3-3"},
  46.          { id:2, pId:0, name:"2", open:true},
  47.          { id:21, pId:2, name:"2-1"},
  48.          { id:22, pId:2, name:"2-2", open:true, drop:false},                         //不允许托拽到此处
  49.          { id:221, pId:22, name:"2-2-1"},
  50.          { id:222, pId:22, name:"2-2-2"},
  51.          { id:223, pId:22, name:"2-2-3"},
  52.          { id:23, pId:2, name:"2-3"}
  53.       ];
  54.  
  55.       function beforeDrag(treeId, treeNodes) {                                        //判断被选中的结点是否允许托拽
  56.          for (var i=0,l=treeNodes.length; i<l; i++) {
  57.             if (treeNodes[i].drag === false) {
  58.                 alert('被托拽结点不允许操作');
  59.                return false;
  60.             }
  61.          }
  62.          alert('被托拽结点允许操作');
  63.          return true;
  64.       }
  65.       function beforeDrop(treeId, treeNodes, targetNode, moveType) {                  //判断是否允许被托拽到此地
  66.           alert('托拽事件检测中');
  67.             var state = targetNode ? targetNode.drop !== false : true;
  68.             if (!state){
  69.                 alert('托拽目的地结点不允许此操作');
  70.             }else{
  71.                 alert('托拽目的地结点允许此操作');
  72.             }
  73.             return state;
  74.       }
  75.  
  76.       function drag() {
  77.  
  78.         }
  79.  
  80.         function drop() {
  81.  
  82.         }
  83.  
  84.       function setCheck() {
  85.          var zTree = $.fn.zTree.getZTreeObj("sys"),                                      //将checkbox的值传到zTree树内部
  86.          isCopy = $("#copy").attr("checked"),
  87.          isMove = $("#move").attr("checked"),
  88.          prev = $("#prev").attr("checked"),
  89.          inner = $("#inner").attr("checked"),
  90.          next = $("#next").attr("checked");
  91.          zTree.setting.edit.drag.isCopy = isCopy;
  92.          zTree.setting.edit.drag.isMove = isMove;
  93.          zTree.setting.edit.drag.prev = prev;
  94.          zTree.setting.edit.drag.inner = inner;
  95.          zTree.setting.edit.drag.next = next;
  96.       }
  97.  
  98.       $(document).ready(function(){
  99.          $.fn.zTree.init($("#sys"), setting, nodes);
  100.          setCheck();
  101.          $("#copy").bind("change", setCheck);                                            //利用bind函数把copy,move,perv,inner,next复选框的改变事件绑定到setCheck函数
  102.          $("#move").bind("change", setCheck);
  103.          $("#prev").bind("change", setCheck);
  104.          $("#inner").bind("change", setCheck);
  105.          $("#next").bind("change", setCheck);
  106.       });
  107.    </SCRIPT>
  108. </HEAD>
  109.  
  110. <BODY>
  111. <div class="content_wrap">
  112.    <div class="zTreeDemoBackground left">
  113.       <ul id="sys" class="ztree"></ul>
  114.    </div>
  115.    <div class="right">
  116.         <li><p>基本拖拽设置：<br/>
  117.             <input type="checkbox" id="copy" class="checkbox first" checked /><span>允许复制</span>
  118.             <input type="checkbox" id="move" class="checkbox " checked /><span>允许移动</span><br/>
  119.  
  120.         </li>
  121.         <li><p>拖拽相对位置设置：<br/>
  122.             <input type="checkbox" id="prev" class="checkbox first" checked /><span>prev</span>
  123.             <input type="checkbox" id="inner" class="checkbox " checked /><span>inner</span>
  124.             <input type="checkbox" id="next" class="checkbox " checked /><span>next</span><br/>
  125.         </li>
  126.    </div>
  127. </div>
  128. </BODY>
  129. </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. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  2. 浅析js中的堆和栈

    这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的简称.说到堆栈,我们讲的就是内存的使用和分配了,没有寄存器的事,也没有硬盘的事.各种语言在处理堆栈的原理上都大 ...

  3. （转）伪指令LTORG和LTONG浅析

    原文地址:http://zqwt.012.blog.163.com/blog/static/1204468420103196564/ 定义和作用 LTORG或LTONG用于声明一个数据缓冲池(也称为文 ...

  4. 使用WireShark进行网络流量安全分析

    WireShark的过滤规则 伯克利包过滤(BPF)(应用在wireshark的捕获过滤器上) ** 伯克利包过滤中的限定符有下面的三种:** Type:这种限定符表示指代的对象,例如IP地址,子网或 ...

  5. XSS-Labs(Level1-10)

    Level-1 简单尝试 使用基础poc<script>alert(1)</script> 代码审计 <?php ini_set("display_errors ...

  6. [Dynamic Programming]动态规划之背包问题

    动态规划之背包问题 例题 现有4样物品n = ['a', 'b', 'c', 'd'],重量分别为w = [2, 4, 5, 3],价值分别为v = [5, 4, 6, 2].背包最大承重c = 9. ...

  7. JDK下载、安装、卸载

    学习java的朋友,第一课就是安装JDK,如果你连他都不会安装,那就非常尴尬,如果面试的时候如果问到这个问题,就Game over了,下面来看看怎么弄吧! 了解JDK JDK的全称是JavaSE De ...

  8. 彻底明白equals和hashCode

    equals和hashCode方法 equals 我们知道equals是用来比较两个对象是否相等的,比如我们常用的String.equals方法 @Test public void test() { ...

  9. Oracle时间日期计算--计算某一日期为一年中的第几周

    Oracle时间日期计算--计算某一日期为一年中的第几周 select to_char(sysdate-10,'yyyymmdd')||':iw:'||to_char(sysdate-10,'iw') ...

  10. netty实现群聊功能

    [概述] 实现一个网络群聊工具.参与聊天的客户端消息是通过服务端进行广播的. 主要由两块组成:聊天服务器端(ChatServer)和聊天客户端(ChatClient). 聊天服务器(ChatServe ...