vue使用vuedraggable实现嵌套多层拖拽排序功能

本文实例为大家分享了vuedraggable实现嵌套多层拖拽排序功能的具体代码，供大家参考，具体内容如下

vue中实现嵌套多层拖拽功能。官网入口：

实现效果：（拖动左侧调整一级的顺序，拖动右侧调整二级的顺序）

class="dragArea list-group" :list="item.children" :clone="clone" :group="{ name: 'people', pull: pullFunction }" @start="start" > <div v-for="element in item.children" :key="element.id" class="list-group-item"> {{ element.name }} </div> </draggable> <!--拖拽内容部分-其他--> <draggable v-else class="dragArea list-group" :list="item.children" :clone="clone" group="people" > <div v-for="element in item.children" :key="element.id" class="list-group-item"> {{ element.name }} </div> </draggable> </li> </ul> <el-button @click="getNewList">点我看console里面的最新数据</el-button> </div></template><script>import draggable from 'vuedraggable'export default { components: { draggable }, data() { return { tolList: [ { name: '第一天', children: [ { name: '11111', id: 1 } ] }, { name: '第二天', children: [ { name: 'aaaaa', id: 11 }, { name: 'bbbbbb', id: 12 } ] }, { name: '第三天', children: [ { name: ',,,111,,', id: 21 } ] } ], controlOnStart: true } }, methods: { clone({ name, id }) { return { name, id: id } }, pullFunction() { return this.controlOnStart ? 'clone' : true }, start({ originalEvent }) { this.controlOnStart = originalEvent.ctrlKey }, getNewList() { let a = this.tolList console.log(a) } }}</script><style lang="scss" scoped> .wholeList{ margin-top:200px; width:500px; display: flex; flex-wrap: wrap; .leftCon{ width: 100px; .leftConLi{ background: #42B974; line-height: 80px; margin-bottom:10px; } } .oneUl{ width: calc(100% - 100px); .oneLi{ display: flex; height: 80px; margin-bottom:10px; border:1px solid red; .dragArea{ width: 100%; min-height: 30px; } } } }</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。