安裝插件
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: ['張三','李四','王武','張怡寧','劉詩(shī)雯']
? ? }
? },
? methods: {
? ? draggableEnd(e) {
? ? ? console.log("拖動(dòng)前的索引 :" + e.oldIndex);
? ? ? console.log("拖動(dòng)后的索引 :" + e.newIndex);
? ? },
? }
}
</script>
.item-class{
? width: 300px;
? height: 50px;
? line-height: 50px;
? background-color: #0077aa;
? color: #ffffff;
? margin-right: 5px;
? margin-top: 5px;
}
</style>
