javascript入门 之 zTree（十二 托拽事件（二））
1.逻辑可能有不完善的地方，如果发现，请指出。 <!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: {
drag:{
autoExpandTrigger: true,
prev: dropPrev, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作
next: dropNext, //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作
inner: dropInner //拖拽到目标节点时，设置是否允许成为目标节点的子节点
},
enable: true,
showRemoveBtn: true, //设置是否显示删除按钮
showRenameBtn: true //设置是否显示编辑名称按钮
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag, //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
beforeDrop: beforeDrop, //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
onDrag: onDrag, //侦听beforeDrag回调结果，确定是否允许drag
drop: onDrop //侦听beforeDrop回调结果，确定是否允许drop
}
}; var nodes =[
{ id:1, pId:0, name:"1", open:true,childOuter:false}, //禁止子结点移走
{ id:13, pId:1, name:"1-3"},
{ id:11, pId:1, name:"1-1",dropInner:false}, //不成为父结点
{ id:12, pId:1, name:"1-2", open:true,dropRoot:false}, //不成为根结点
{ 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,childOrder:false,dropInner: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) { //如果该结点不允许drag 或者 该结点的父结点不允许子结点外出，则返回false 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('托拽事件检测中');
return true;
} function dropPrev(treeId, nodes, targetNode) { //如果目标结点允许待托拽结点到自己前面，则返回true var pNode = targetNode.getParentNode(); if (pNode && pNode.dropInner === false) { return false; } else { for (var i=0,l=nodes.length; i<l; i++) { //遍历所有结点，三个条件 1.存在父结点 2.托拽结点和目标结点的父结点不相同 3.托拽结点的父结点不允许外出
//只要三者不同时成立，便可以移动到目标结点的前面 var curPNode = nodes[i].getParentNode(); if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) { return false;
}
}
}
return true;
} function dropInner(treeId, nodes, targetNode) { if (targetNode && targetNode.dropInner === false) { return false; } else { for (var i=0,l=nodes.length; i<l; i++) { if (!targetNode && nodes[i].dropRoot === false) { //1.不存在目标结点 2.托拽结点不能成为根结点 二者同时满足便返回false return false; } else if (nodes[i].parentTId && nodes[i].getParentNode() !== targetNode && nodes[i].getParentNode().childOuter === false || !targetNode.drop) { //1.存在目标结点 2.托拽结点的根结点不是目标结点 3.托拽结点的根结点不允许外出
//三者同时成立则返回false
//目标结点不允许托拽到此处返回false return false;
}
}
}
return true;
} function dropNext(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode(); if (pNode && pNode.dropInner === false) { //目标结点的根结点不允许进入子结点 return false; } else { //同dropPrev for (var i=0,l=nodes.length; i<l; i++) { var curPNode = nodes[i].getParentNode(); if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) { return false;
}
}
}
return true;
} function onDrag(event, treeId, treeNodes) { }
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) { } $(document).ready(function(){
$.fn.zTree.init($("#sys"), setting, nodes);
});
</SCRIPT>
</HEAD> <BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="sys" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
javascript入门 之 zTree（十二 托拽事件（二））的更多相关文章
- javascript入门 之 zTree（十一 托拽事件（一））
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
- javascript入门 之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
- 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（二 标准json数据）
1.代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </T ...
- javascript入门 之 ztree (九 单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- javascript入门 之 ztree (八 一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- javascript入门 之 ztree(七 结点的查询)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
随机推荐
- 小白的docker极简入门（二）、5分钟教你玩转docker安装
0-前言 上一篇中,我们已经安装后Linux了,我们需要在Linux下安装docker,然后才能在docker中安装和部署各种应用 同样,5分钟教你完成docker正确安装和使用, 不是纸上谈兵,不是 ...
- java-随机点名2（新手）
//创建的一个包名. package qige; //导入一个包.import java.util.*; //定义一个类.public class SJdm { //公共静态的主方法. public ...
- MyBatis框架——多表查询
MyBatis多表查询, 从表中映射主表,使用 association 标签,通过设置 javaType 属性关联实体类: 主表映射从表,使用 collection 标签,通过 ofType 属性关联 ...
- linux环境下的时间编程
Linux下提供了丰富的api以供开发者们处理和时间相关的问题.然而这些接口看似各自为政实则有有着千丝万缕的联系,在学习和时间中引发了各种各样的混乱.因此时间处理成为了许多Linux开发者的梦魇,遇到 ...
- canvas绘制流星雨特效
源码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta n ...
- Python进制的转换
Python整数能够以十六进制,八进制和二进制来编写,作为一般以10位基数的十进制计数法的补充. 一: 上面三种进制的常用表示 >>> 0o1, 0o20, 0o377 # 八进制 ...
- spring-boot-plus-v2.0发布了-让天下没有难写的代码
spring-boot-plus是易于使用,快速,高效,功能丰富,开源的spring boot脚手架 前后端分离,专注于后端服务 目标 每个人都可以独立.快速.高效地开发项目! GITHUB | GI ...
- docker image换包步骤
Docker Commit 1.在IDEA中通过maven package得到watchman-1.5.0-SNAPSHOT.jar,将其scp到baisheng1本地: 2.查看dbaservice ...
- MySQL5.7 import表结构报错超出表空间界限
事后测试了一下,一下方法就是垃圾,看看可以,别跟着学!!! 数据库重启后,问题依然暴露出来了,参数什么的都是扯,擦 记录一个困扰我好几天的问题.先贴上报错: space name jxtms/Cost ...
- Building Applications with Force.com and VisualForce (DEV401) （二三）：Visualforce Componets (Tags) Library Part III
Dev401-024:Visualforce Pages: Visualforce Componets (Tags) Library Part IIIStatic Resources1.Static ...