作者:果丽珍 | 来源:互联网 | 2022-03-21 14:27
我的是根据父级id做的一些判断
allowDrop(draggingNode, dropNode, type){
//注掉的是同级拖拽
/* if (draggingNode.data.level === dropNode.data.level) {
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
}
} else {
// 不同级进行处理
return false
} */
//任意级别拖拽
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
} else {
return type === 'prev' || type === 'next' || type === 'inner'
}
},
//拖拽完成之后要重新排序
/*
* draggingNode:被拖拽节点对应的 Node
* dropNode:结束拖拽时最后进入的节点
* type: 被拖拽节点的放置位置(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)
}
})
}
补充知识:element-ui tree 实现同级拖拽
我就废话不多说了,大家还是直接看代码吧~
通过 node 获取
通过 key 获取
通过 node 设置
通过 key 设置
清空
以上这篇vue elementui tree 任意级别拖拽功能代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。