我的是根據父級id做的一些判斷

<el-tree draggable :allow-drop='allowDrop' @node-drop='sort' accordion 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='暫無數據'> 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 實現同級拖拽

我就廢話不多說了，大家還是直接看代碼吧~

<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'>通過 node 獲取</el-button> <el-button @click='getCheckedKeys'>通過 key 獲取</el-button> <el-button @click='setCheckedNodes'>通過 node 設置</el-button> <el-button @click='setCheckedKeys'>通過 key 設置</el-button> <el-button @click='resetChecked'>清空</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-1' }, { id: 9, label: '三級 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', children: [ { id: 4, label: '二級 1-1', prop: '4' } ] }, { id: 2, label: '一級 2', children: [ { id: 5, label: '二級 2-1', prop: '5' }, { id: 6, label: '二級 2-2', prop: '6' } ] }, { id: 3, label: '一級 3', children: [ { id: 7, label: '二級 3-1', prop: '7' }, { id: 8, label: '二級 3-2', prop: '9' } ] }, { id: 9, label: '一級4' } ], defaultProps: { children: 'children', label: 'label' }, allowDrop(draggingNode, dropNode, type) { if (draggingNode.level === dropNode.level) { if (draggingNode.parent.id === dropNode.parent.id) { // 向上拖拽 || 向下拖拽 return type === 'prev' || type === 'next'; } } else { // 不同級進行處理 return false; } }, sort(draggingNode, dropNode, type, event) { // console.log(’排序’) // console.log('<><><>>><><<><><><><><><><>') // 拖拽之后的重新組合的數組 // 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>

以上這篇vue elementui tree 任意級別拖拽功能代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。