<!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. 创建Sphinx + GitHub + ReadtheDocs托管文档

    最新博客链接 "Tsanfer's Blog" 创建Sphinx + GitHub + ReadtheDocs托管文档 Readthedocs在线电子书链接

  2. [Visual Basic]冒泡排序及优化

    冒泡排序 注意点 越界问题:i的边界是n-1,也就是说是对总共的第1~n个数进行排列(最后一个数处于被比较状态,不需要额外主动比较):j的初始值或最终值与当前i的值 有关题目中往往会改变i的值来考察, ...

  3. 「每日五分钟，玩转JVM」：两种算法

    前言 上篇文章,我们了解了GC 的相关概念,这篇文章我们通过两个算法来了解如何去确定堆中的对象实例哪些是我们需要去回收的垃圾对象. 引用计数算法 引用计数法的原理很简单,就是在对象中维护一个计数器,当 ...

  4. mvc+ef入门（三）

    (1)新建一个DAL层用来放置Accountcontext.cs和Accountinitializer.新建一个models层用来归放sysuser,sysrole和sysuserrole,三个类.( ...

  5. Spring Boot（十三）：整合Redis哨兵，集群模式实践

    前面的两篇文章(Redis的持久化方案, 一文掌握Redis的三种集群方案)分别介绍了Redis的持久化与集群方案 -- 包括主从复制模式.哨兵模式.Cluster模式,其中主从复制模式由于不能自动做 ...

  6. F版本SpringCloud 3—大白话Eureka服务注册与发现

    引用:服务注册与发现,就像是租房子一样 前言 今天洛阳下雨了,唉,没有想到有裹上了羽绒服,不穿冷穿了热的尴尬温度.上学工作这么多年都在外面,家里竟然没有一件春天的外套. 日常闲聊之后,开始今天的芝士环 ...

  7. 如何编写shellcode

    ShellCode的编写就是将函数或变量在内存中的间接地址改为函数或变量在内存中的直接地址,直接调用! 以MessageBox函数为例进行讲解如下 新建shellcode.cpp: 编写代码如下: 运 ...

  8. Vue 使用百度地图 实现搜索 定位

    要求能定位到国外 及 查看了文档 百度支持东南亚大部分地区  满足需求 从而使用百度地图 <template> <div class="addHospital"& ...

  9. 数学-绝对值-Reverse Subarray To Maximize Array Value

    2020-02-11 12:01:21 问题描述: 问题求解: 本题的难度个人感觉还是蛮大的,主要是不容易想到O(n)的解. 对于 ...a, [b, ... , c], d, ...,如果我们将其中 ...

  10. Linux下MySQL的数据库安装

    centos7 + mysql5.7 tar包解压安装 先执行wget https://dev.mysql.com//Downloads/MySQL-5.7/mysql-5.7.18-linux-gl ...