从 https://www.jianshu.com/p/edc1024aa4f0 这里找到代码，基本可以使用，但是 子列表拖拽的时候，视图是变了，但是子列表值没有变化，这里稍作改变，代码如下，直接复制就可以
<template>
<draggable class="wrapper" :list="list" @update="datadragEnd">
<transition-group>
<div v-for="(item, index) in list" :key="index" class="item">
<draggable
class="wrapper"
:list="item"
@update="datadragEndSub(index, $event)"
>
<transition-group>
<p v-for="(item2, index2) in item" :key="index2">{{ item2 }}</p>
</transition-group>
</draggable>
</div>
</transition-group>
</draggable>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "HelloWorld",
components: { draggable },
data() {
return {
list: [
[1, 2, 3, 4],
[7, 8, 5, 6],
[9, 10, 5, 6],
[11, 12, 3, 5],
[13, 14, 4, 6],
[15, 16, 3, 6],
],
};
},
methods: {
datadragEnd(evt) {
console.log(this.list);
},
datadragEndSub(index, evt) {
console.log(this.list);
},
},
};
</script>
<style scoped lang="less">
.wrapper {
display: flex;
justify-content: center;
width: 100%;
.item {
margin: 20px;
width: 300px;
background-color: #42b983;
color: #ffffff;
p {
margin: 5px;
padding: 10px;
height: 20px;
background: lightcoral;
}
}
}
</style>
