vue使用vuedraggable插件实现拖拽效果

npm install vuedraggable

<template>
  <draggable v-model="list" class="drag-container">
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
  </draggable>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...
      ],
    };
  },
};
</script>
 
<style>
.drag-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

特别提示：

vue使用vuedraggable插件实现拖拽效果

存在bug，如果需要记录拖拽顺序，并及时更新排序得话，不要使用v-model,会出现问题，需要自己单独计算一次，
如果只是改变顺序不需要及时更新页面显示得页卡排序即可直接使用