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(十二 托拽事件(二))
猜你喜欢
转载自blog.csdn.net/ITlanyue/article/details/81589558
今日推荐
周排行