Arrastre del componente del árbol elementUI (admite el arrastre de nodos secundarios, los nodos secundarios no se pueden arrastrar hacia afuera y el nodo principal más externo se puede configurar para que no se pueda arrastrar)
Efecto: 1. El nodo HAS-BLED más externo no se puede arrastrar.
2. El nodo secundario es antiguo y solo se puede arrastrar dentro del nodo principal actual. No se puede arrastrar a los nodos de prueba 111 y HAS-BLED
. 3. Los nodos en la prueba 444 y la prueba 333. También arrastre solo dentro del área de prueba 111 del nodo principal
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>
Propiedades operativas
arrastrable: configura el componente del árbol para que se pueda arrastrar.
@node-drop es un evento que se activa cuando el arrastre se completa con éxito.
Allow-drag determina si el nodo se puede arrastrar.
Allow-drop determina si el nodo de destino se puede colocar al arrastrar. El parámetro de tipo tiene tres situaciones: 'anterior', 'interior' y 'siguiente', que significan respectivamente colocar antes del nodo de destino, insertar en el nodo de destino y colocar después del nodo de destino.
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';
}
}
},