<!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>