vue elementui tree Drag and Drop Function Code at Any Level
- 2021-08-09 07:05:15
- OfStack
Mine is based on 1 judgment made by parent id
<el-tree
draggable :allow-drop="allowDrop" @node-drop="sort"
accordion style="font-size:14px;width:250px;"
ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click-node="false"
node-key="id" :highlight-current="true" :load="loadNode"
lazy :render-content="renderContent" @node-click="handleNodeClick"
empty-text=" Data is not available at present ">
allowDrop(draggingNode, dropNode, type){
// What is left out is the same level drag
/* if (draggingNode.data.level === dropNode.data.level) {
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
}
} else {
// Processing at different levels
return false
} */
// Drag at any level
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
} else {
return type === 'prev' || type === 'next' || type === 'inner'
}
},
// Reorder after dragging and dropping is completed
/*
* draggingNode The corresponding to the dragged node Node
* dropNode The last node entered at the end of the drag
* type: Where the dragged node is placed ( before , after , inner )
* event
*/
sort(draggingNode,dropNode,type,event) {
console.log(draggingNode)
console.log(dropNode)
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
let obj = {
aboveId:'',
arr:[]
}
obj.aboveId = dropNode.data.aboveId
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id)
}
console.log(obj)
this.updateOrderMe(obj)
} else {
let obj = {
aboveId:'',
id:'',
newAboveId:''
}
obj.aboveId = draggingNode.data.aboveId
obj.id = draggingNode.data.id
obj.newAboveId = dropNode.data.id
this.randomDrag(obj)
}
},
randomDrag(obj) {
this.$http
.post(url, obj).then(res =>{
if (!res.data.success) {
this.$message.warning(res.data.msg)
}
})
},
updateOrderMe(obj) {
this.$http
.post(url, {
aboveId:obj.aboveId,
ids: obj.arr
}).then(res =>{
if (!res.data.success) {
this.$message.warning(res.data.msg)
}
})
}
Additional knowledge: element-ui tree implements sibling drag and drop
I won't talk too much, let's just look at the code ~
<template>
<div>
<el-tree
draggable
:allow-drop="allowDrop"
@node-drop="sort"
ref="tree"
:data="data2"
:props="defaultProps"
show-checkbox
default-expand-all
node-key="id"
highlight-current
></el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes"> Pass node Get </el-button>
<el-button @click="getCheckedKeys"> Pass key Get </el-button>
<el-button @click="setCheckedNodes"> Pass node Settings </el-button>
<el-button @click="setCheckedKeys"> Pass key Settings </el-button>
<el-button @click="resetChecked"> Empty </el-button>
</div>
</div>
</template>
<script>
// import draggable from "vuedraggable";
// import Sortable from "sortablejs";
export default {
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "2 Grade 2-1"
},
{
id: 9,
label: "3 Grade 1-1-1"
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
mounted() {
const el = document.querySelectorAll(".el-tree")[0];
console.log(el);
},
data() {
return {
data2: [
{
id: 1,
label: "1 Grade 1",
children: [
{
id: 4,
label: "2 Grade 1-1",
prop: "4"
}
]
},
{
id: 2,
label: "1 Grade 2",
children: [
{
id: 5,
label: "2 Grade 2-1",
prop: "5"
},
{
id: 6,
label: "2 Grade 2-2",
prop: "6"
}
]
},
{
id: 3,
label: "1 Grade 3",
children: [
{
id: 7,
label: "2 Grade 3-1",
prop: "7"
},
{
id: 8,
label: "2 Grade 3-2",
prop: "9"
}
]
},
{
id: 9,
label: "1 Grade 4"
}
],
defaultProps: {
children: "children",
label: "label"
},
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) {
if (draggingNode.parent.id === dropNode.parent.id) {
// Drag Up || Drag Down
return type === "prev" || type === "next";
}
} else {
// Processing at different levels
return false;
}
},
sort(draggingNode, dropNode, type, event) {
// console.log(' Sort ')
// console.log("<><><>>><><<><><><><><><><>")
// Array reassembled after dragging and dropping
// console.log(dropNode.parent); //dropNode.parent.childNodes =[]
let obj = {
aboveId: "",
arr: []
};
obj.aboveId = dropNode.data.aboveId;
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id);
}
}
};
}
};
</script>