实现Tree 树形控件的鼠标拖拽功能
1.element中的el-tree实现可拖拽节点
通过 draggable 属性可让节点变为可拖拽
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
>
</el-tree>
methods: {
handleDragStart(node, ev) {
console.log("drag start", node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log("tree drag enter: ", dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log("tree drag leave: ", dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log("tree drag over: ", dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log("tree drag end: ", dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log("tree drop: ", dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === "二级 3-1") {
return type !== "inner";
} else {
return true;
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
},
},
实现一个只能在本级改变位置拖拽
使用allowDrop
// 拖拽时判定目标节点能否被放置。
//draggingNode(拖拽的节点)
//dropNode(放置的目标节点)
//type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示
//放置在目标节点前、插入至目标节点和放置在目标节点后
allowDrop(draggingNode, dropNode, type) {
// 一级节点互相拖拽
// if (draggingNode.level == "1") {
// if (dropNode.level == "1") {
// return type === "prev" || type === "next";
// }
// }
// // 二级节点之间互相拖拽，但是只能放在自己的二级节点
// if (draggingNode.level == "2") {
// if (dropNode.level == "2") {
// if (dropNode.data.ParentNodes == draggingNode.data.ParentNodes) {
// return type === "prev" || type === "next";
// }
// }
// }
if (draggingNode.level == dropNode.level) {
if (dropNode.data.ParentNodes == draggingNode.data.ParentNodes) {
return type === "prev" || type === "next";
}
}
return false;
},
这样就可以实现，同级拖拽