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>