<!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. 在vue中实现锚点定位功能

    场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...

  2. 数据科学中的常见的6种概率分布（Python实现）

    作者:Pier Paolo Ippolito@南安普敦大学 编译:机器学习算法与Python实战(微信公众号:tjxj666) 原文:https://towardsdatascience.com/pr ...

  3. 何为内存模型（JMM）？

    前言 任何一门语言都有其语言规范,从逻辑上我们可划分为语法规范和语义规范,语法规范则是描述了如何通过相关语法编写可执行的程序,而语义规范则是指通过语法编写的程序所构造出的具体含义.语言只要具备存储(比 ...

  4. vs2017 dlib19.3 opencv3.41 C++ 环境配置 人脸特征点识别

    身为一个.net程序员经过两天的采坑终于把人脸特征检测的项目跑通了,然后本文将以dlib项目中人脸特征检测工程为例,讲解dlib与opencv 在vs2017 C++ 项目中的编译与运行路径配置. 1 ...

  5. 大数据软件安装之ZooKeeper监控

    一.ZooKeeper安装 官方文档: https://zookeeper.apache.org/doc/r3.5.5/zookeeperStarted.html 1.解压分发 [test@hadoo ...

  6. Python-String字符串操作

    name='xioer-pipo' print(name.capitalize()) #第一个字符大写 print(name.expandtabs()) print(name.count('o')) ...

  7. Spring Cloud 系列之 Alibaba Sentinel 服务哨兵

    前文中我们提到 Netflix 中多项开源产品已进入维护阶段,不再开发新的版本,就目前来看是没有什么问题的.但是从长远角度出发,我们还是需要考虑是否有可替代产品使用.比如本文中要介绍的 Alibaba ...

  8. Spring02——Spring 中 Bean 的生命周期及其作用域

    在前一篇文章中,我们已经介绍了 Spring IOC 的相关知识,今天将为个位介绍 Spring 中 Bean 的相关知识.关注我的公众号「Java面典」,每天 10:24 和你一起了解更多 Java ...

  9. inux上安装mysql

    目录 1.先验证是否安装了mysql 2.先下载mysql的repo源 3.安装mysql rpm包,执行命令: 4.安装mysql,执行命令: 5.登录然后重置密码,执行: 6.执行命令赋权,重启m ...

  10. Ali_Cloud++：阿里云Centos配置iptables防火墙教程

    虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FORWORD都是ACCEPT的规则 1):检查iptab ...