需求：實現左右兩列的 div 可相互拖拽交換數據，（如下圖所示）
話不多說，直接上代碼：
現在，我們來拖拽看看效果：
這樣，就實現了既能上下列內拖拽，又能左右跨列拖拽
<template>
<div>
<vuedraggable class="left" v-model="list1" group="people" :options="dragOptions">
<transition-group tag="div">
<div v-for="item in list1" :key="item" class="item">
<p>{{item}}</p>
</div>
</transition-group>
</vuedraggable>
<vuedraggable class="right" v-model="list2" group="people" :options="dragOptions">
<transition-group tag="div">
<div v-for="item in list2" :key="item" class="item">
<p>{{item}}</p>
</div>
</transition-group>
</vuedraggable>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default {
data () {
return {
dragOptions:{
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
list1: [1,3,5,7,9],
list2: [2,4,6,8,10]
}
},
components: {
vuedraggable
},
}
</script>
<style scoped>
.item{
width: 300px;
height: 50px;
background-color: #42b983;
color: #ffffff;
margin-top: 10px;
transform: scale(0.9);
}
.left, .right {
display: inline-block;
width: 40%;
height: 500px;
border: 2px solid #333
}
</style>