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>

javascript入门之 zTree（十一托拽事件（一））的更多相关文章

javascript入门之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
javascript入门之 ztree (八一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
javascript入门之 zTree（十二托拽事件（二））
1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...
javascript入门之 ztree (六结点的点击和展开/折叠事件)
1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...
javascript入门之 zTree（十三移动/复制事件）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
javascript入门之 zTree（十四增删查改）（二）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
javascript入门之 zTree（十四增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
javascript入门之 ztree (九单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
javascript入门之 ztree(七结点的查询)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

Array.isArray() 判断是不是数组
var arr = new Array(); if(Array.isArray()){ console.log('yes') } else { conssole.log('no') }
java批量处理
最近用到Java批量处理,一次性处理多个文件夹下的多个文件,在此记录一下. 我的思路:首先要保证文件夹和文件夹下的文件的命名是有规律的,利用for循环,每次自增变量,再拼接字符串,从而得到各个文件的路 ...
Linux系统之LNMP及nginx反向代理实现
1.编译安装LNMP,并安装wordpress 首先准备环境,编译安装LNMP可以是多台主机,也可以是单台主机,把nginx,mysql,php都集中安装在一个主机上:我这里以一台主机为例吧!! 一. ...
对象数组化 Object.values(this.totalValueObj).forEach(value => {
对象数组化 Object.values(this.totalValueObj).forEach(value => {
转载:Nginx 相关介绍
转载自:https://www.cnblogs.com/wcwnina/p/8728391.html Nginx 相关介绍(Nginx是什么?能干嘛?) Nginx的产生没有听过Nginx?那么 ...
Natas33 Writeup（Phar反序列化漏洞）
Natas33: 又是一个上传文件的页面,源码如下: // graz XeR, the first to solve it! thanks for the feedback! // ~morla cl ...
XSS-Labs(Level1-10)
Level-1 简单尝试使用基础poc<script>alert(1)</script> 代码审计 <?php ini_set("display_errors ...
shell脚本基础-起始句的含义
大部分的shell脚本第一行,要么是 #!/bin/bash 要么是 #!/bin/sh 其实第二种是第一种的升级版,增加了协议posix(#!/bin/sh = #!/bin/bash + posi ...
基于Docker搭建Nginx图片服务器
前言一般开发中,都会把图片上传到一个目录,然后将目录和文件名拼接存储在数据库中,但是,这种方法如果没弄好的话可能有一定的缺陷. 若项目搬迁,即时这台服务器本身还在用,存放在服务器的跟项目相关的图片也 ...
Python之split()函数
在Python的高级特性里有切片(Slice)操作符,可以对字符串进行截取.Python还提供split()函数可以将一个字符串分裂成多个字符串组成的列表. split()的语法挺简单的: str.s ...

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

javascript入门 之 zTree（十一 托拽事件（一））的更多相关文章

随机推荐

热门专题

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

javascript入门之 zTree（十一托拽事件（一））的更多相关文章