废话不说了,直接贴代码...
<template>
<vuedraggable class="wrapper" v-model="list" @update="datadragEnd">
<transition-group>
<div v-for="(item,index) in list" :key="index" class="item">
<vuedraggable class="wrapper" @update="datadragEndSub(index,$event)">
<transition-group>
<p v-for="(item2,index2) in item" :key="index2">{{item2}}</p>
</transition-group>
</vuedraggable>
</div>
</transition-group>
</vuedraggable>
</template>
<script>
import vuedraggable from 'vuedraggable';
export default {
name: 'HelloWorld',
components: {vuedraggable},
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('父拖动前的索引 :' + evt.oldIndex)
console.log('父拖动后的索引 :' + evt.newIndex)
},
datadragEndSub (index,evt) {
console.log(index)
console.log('子拖动前的索引 :' + evt.oldIndex)
console.log('子拖动后的索引 :' + evt.newIndex)
}
}
}
</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>
公司网络差,贴不了图片 。可以直接复制代码运行。记得安装npm install vuedraggable