vuedraggable实现拖拽

vuedraggable是一种基于Vue.js的拖放列表组件，它可以轻松实现拖动和重新排序列表项。要使用它，您需要首先安装vuedraggable包，并在Vue应用程序中引入它。然后，您可以使用vuedraggable组件来包含您要拖动的列表，指定一个v-model绑定来跟踪列表顺序，并使用一个具有唯一标识符的slot来定义每个列表项。

以下是一个简单的示例：

<template>
  <div>
    <h2>My List</h2>
    <draggable v-model="list" :options="{animation: 200}" class="list-group">
      <div v-for="(item, index) in list" :key="item.id" class="list-group-item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</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' },
        { id: 4, name: 'Item 4' },
      ],
    };
  },
};
</script>