vue实现拖拽（vuedraggable）

Vue.Draggable 是一个基于 Vue.js 和 Sortable.js 的组件，可以实现拖拽功能。以下是如何使用 Vue.Draggable 的基本步骤：

1. 安装 Vue.Draggable 和 Sortable.js：

npm install vuedraggable
npm install sortablejs

2. 在 Vue 组件中引入并注册 Vue.Draggable：

import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  // ...
}

3. 在模板中使用 Vue.Draggable 组件：

<draggable v-model="list" class="drag-container">
  <div v-for="item in list" :key="item.id" class="drag-item">
    {{ item.name }}
  </div>
</draggable>

4. 在 Vue 实例的数据部分定义拖拽数组 list：

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ...
      ]
    }
  }
}

这样就可以实现一个简单的拖拽列表了。Vue.Draggable 提供了多个选项来自定义拖拽行为，例如 group、sort 等。