elementUI tree component dragging (supports dragging of child nodes, child nodes cannot be dragged outward, and the outermost parent node can be set to be unable to be dragged)
Effect: 1. The outermost HAS-BLED node cannot be dragged.
2. The child node is old and can only be dragged within the current parent node. It cannot be dragged into the test 111 and HAS-BLED nodes .
3. Test 444, test 333 nodes Also only drag within the parent node test 111 area
HTML
<el-tree
ref="rightTree"
:data="rightTreeData"
node-key="labelId"
default-expand-all
@node-click="nodeClick"
:props="defaultProps"
draggable
@node-drop="handleDrop"
:allow-drop="allowDrop"
:allow-drag="allowDrag"
>
</el-tree>
Operational properties
draggable: Set the tree component to be draggable.
@node-drop is an event triggered when dragging is successfully completed.
allow-drag determines whether the node can be dragged.
allow-drop determines whether the target node can be placed when dragging. The type parameter has three situations: 'prev', 'inner' and 'next', which respectively means placing before the target node, inserting into the target node and placing after the target node.
js
// 最外层父节点不可拖拽
allowDrag(draggingNode) {
console.log(draggingNode)
return draggingNode.data.labelTypeId;//唯一键，最外层父节点无labelTypeId属性，则不可拓展
},
allowDrop(moveNode, inNode, type) {
// allow-drop属性是用来限制树节点拖拽后是否可以放置在当前位置，属性值为true时可以，为false时不可以。
// 1.子节点禁止外托
// 2.禁止拖进有子节点的层级
// 3.没有设置一级节点判断 不可拖拽在allowDrag设置
console.log(moveNode.nextSibling,moveNode.parent.id,inNode.parent.id)
// 二级拖动到二级 高龄、测试111
if (
moveNode.level == 2 &&
inNode.level == 2 &&
moveNode.parent.id == inNode.parent.id
) {
// 四种情况
if (moveNode.nextSibling == undefined) {
return type == 'prev';
} else if (inNode.nextSibling == undefined) {
return type == 'next';
} else if (moveNode.nextSibling.id !== inNode.id) {
return type == 'prev';
} else {
return type == 'next';
}
}
//三级内拖拽 测试222，测试333，测试444
if (
moveNode.level == 3 &&
inNode.level == 3 &&
moveNode.parent.id == inNode.parent.id
) {
// 四种情况
if (moveNode.nextSibling == undefined) {
return type == 'prev';
} else if (inNode.nextSibling == undefined) {
return type == 'next';
} else if (moveNode.nextSibling.id !== inNode.id) {
return type == 'prev';
} else {
return type == 'next';
}
}
},