<!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. scrapy-redis使用以及剖析(转)

    scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单分布式爬虫程序,该组件本质上提供了三大功能: scheduler - 调度器 dupefilter - URL去重 ...

  2. let和var在for循环中的不同表现

    var声明变量: var只有函数作用域,没有块级作用域 //函数作用域的表现 function test(){ var i =10; console.log(i); } test(); console ...

  3. 多线程的CAS

    CAS Compare And Swap (Compare And Exchange) / 自旋 / 自旋锁 / 无锁 独占锁:独占锁是一种悲观锁,synchronized就是一种独占锁,会导致其它所 ...

  4. Natas12 Writeup（文件上传漏洞）

    Natas12: 文件上传页面,源码如下: function genRandomString() { $length = 10; $characters = "0123456789abcde ...

  5. 【盘它！】那些让效率MAX的工具和方法(Mac篇)

    一.前言 人类之所以伟大,是因为会创造并使用工具! 工欲善其事必先利器.高效的工具和方法不仅能最大化 节省我们的时间,还可以一定程度上让我们 保持专注,以达到 事半功倍 的效果. 但仅仅有工具不会使用 ...

  6. 被问到到http的时候你就这么回答！

    大家好,我是标题党,啊不,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. 什么是互 ...

  7. C# 录音和播放录音-NAudio

    在使用C#进行录音和播放录音功能上,使用NAudio是个不错的选择. NAudio是个开源,相对功能比较全面的类库,它包含录音.播放录音.格式转换.混音调整等操作,具体可以去Github上看看介绍和源 ...

  8. Spark在Windows环境下的配置

    1.下载 下载地址:http://spark.apache.org/downloads.html. 选择下面版本下载. 2.操作流程:https://blog.csdn.net/nxw_tsp/art ...

  9. 在Ubuntu中安装OpenCV-Python | 三

    在本教程中,我们将学习在Ubuntu System中设置OpenCV-Python.以下步骤针对Ubuntu 16.04和18.04(均为64位)进行了测试. 可以通过两种方式在Ubuntu中安装Op ...

  10. EF多租户实例：快速实现分库分表

    前言 来到这篇随笔,我们继续演示如何实现EF多租户. 今天主要是演示多租户下的变形,为下图所示 实施 项目结构 这次我们的示例项目进行了精简,仅有一个API项目,直接包含所有代码. 其中Control ...