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>
動作特性
raggable: ツリーコンポーネントをドラッグ可能に設定します。
@node-dropはドラッグが正常に完了したときにトリガーされるイベントです。allow
-dragはノードをドラッグできるかどうかを決定します。allow
-dropはドラッグ時にターゲットノードを配置できるかどうかを決定します。type パラメータには、「prev」、「inner」、「next」の 3 つの状況があり、それぞれターゲット ノードの前に配置すること、ターゲット ノードに挿入すること、ターゲット ノードの後に配置することを意味します。
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';
}
}
},