这篇文章主要介绍了vue elementui tree 任意级别拖拽功能代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
我的是根据父级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.<p style="color:transparent">本文来源gao!daima.com搞$代!码网</p>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 实现同级拖拽
我就废话不多说了，大家还是直接看代码吧~
<div> <div class="buttons"> 通过 node 获取通过 key 获取通过 node 设置通过 key 设置清空</div></div>
以上就是vue elementui tree 任意级别拖拽功能代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue elementui tree 任意级别拖拽功能代码
转载请注明原文链接：vue elementui tree 任意级别拖拽功能代码
