好资源导航 » 文章资讯 » vue elementui tree 任意级别拖拽功能代码

vue elementui tree 任意级别拖拽功能代码

2023-07-17 14:06:03 77

我的是根据父级id做的一些判断



allowDrop(draggingNode,dropNode,type){
//注掉的是同级拖拽
/*if(draggingNode.data.level===dropNode.data.level){
if(draggingNode.data.aboveId===dropNode.data.aboveId){
returntype==='prev'||type==='next'
}
}else{
//不同级进行处理
returnfalse
}*/
//任意级别拖拽
if(draggingNode.data.aboveId===dropNode.data.aboveId){
returntype==='prev'||type==='next'
}else{
returntype==='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){
letobj={
aboveId:'',
arr:[]
}
obj.aboveId=dropNode.data.aboveId
for(letitemofdropNode.parent.childNodes){
obj.arr.push(item.data.id)
}
console.log(obj)
this.updateOrderMe(obj)
}else{
letobj={
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-uitree实现同级拖拽

我就废话不多说了，大家还是直接看代码吧~

以上这篇vueelementuitree任意级别拖拽功能代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue elementui tree 任意级别拖拽功能代码

热门推荐

随机推荐