安装插件
yarn add vuedraggable
<template>
<draggable v-model="dataList" @update="draggableEnd">
<transition-group class="display-flex flex-wrap-wrap">
<div v-for="itemin dataList" :key="item" class="item-class">
<div v-text="item"></div>
</div>
</transition-group>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default{
name: 'ClassMeeting',
components: {draggable},
props: {},
data() {
return{
dataList: ['张三','李四','王武','张怡宁','刘诗雯']
}
},
methods: {
draggableEnd(e) {
console.log("拖动前的索引 :" + e.oldIndex);
console.log("拖动后的索引 :" + e.newIndex);
},
}
}
</script>
.item-class{
width: 300px;
height: 50px;
line-height: 50px;
background-color: #0077aa;
color: #ffffff;
margin-right: 5px;
margin-top: 5px;
}
</style>
