1. 安装
npm install vuedraggable
2.
draggable组件要包住v-for
使用change事件
<template>
<draggable @change="handleChangeMove" class="drag-container" v-model="combineData" >
<div style="" v-for="(item,index) in combineData" :key="index">
<div id="moveDiv" @click="clickDrill(index)"style="display: flex;align-items: center;justify-content: center;margin-left:20px" :class="activeIndex === index ? 'clickDiv':''">
<img :src="item.image" alt="">
<div style="font-size: 14px;margin-left: 20px;">
<div>{{ item.name }}</div>
<div style="width: 150px;font-size:12px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;"> {{ item.type }}
</div>
</div>
</div>
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: { draggable },
data(){
return{
combineData:[]
}
},
methods:{
// 移动组合的图
handleChangeMove(event){
// event 包含了拖动后的数据和其他信息
console.log('拖动后的数据:', this.combineData);
},
}
}
</script>