elementUI 树组件 拖拽(支持子节点拖拽，子节点无法向外拖拽，最外层父节点可设置无法拖拽)
效果:1.最外层的 HAS-BLED 节点不可拖拽
2.子节点 高龄 仅在当前父节点内拖拽，不可拖拽到测试111和HAS-BLED节点内
3.测试444，测试333内节点也仅在父节点测试111区域内拖拽
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>
操作属性
draggable： 设置树组件可拖拽
@node-drop 拖拽成功完成时触发的事件
allow-drag 判断节点能否被拖拽
allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况：‘prev’、‘inner’ 和 ‘next’，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
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';
}
}
},