vue中使用draggable实现div的移动，并获取最新的数据

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>