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

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