vue2中两个列表使用sortablejs相互拖拽

在 Vue.js 2 中，你可以使用 SortableJS 这个强大的 JavaScript 插件来实现在两个列表之间进行拖拽交互。以下是简单的步骤：

1. 首先，你需要安装 SortableJS 和它的依赖库，比如 VueSortable 或者直接在项目中通过 npm 安装：

   npm install sortablejs vue-sortable vuedraggable

2. 引入所需的模块到你的 Vue 组件中：

   import Sortable from 'vue-sortable';
   import draggable from 'vuedraggable';

3. 创建两个数据数组，假设分别为 `listA` 和 `listB`，并将它们绑定给 Sortable 或 draggable 的元素：

   <ul id="listA" v-model="listA" :sortable="optionsA">
     <!-- ...每个项的 HTML模板... -->
   </ul>
   
   <ul id="listB" v-model="listB" :draggable="true">
     <!-- ...每个项的 HTML模板... -->
   </ul>

4. 初始化 Sortable 或 draggable 的配置，包括排序选项：

   data() {
     return {
       listA: [...], // 初始化的数据
       listB: [...],
       optionsA: { /* SortableJS 的配置 */ },
     };
   },
   methods: {
     handleDrop(event) { /* 接收拖放事件并更新数据 */
       const draggedItem = event.dragged;
       const droppedIndex = event.newIndex;
       this.$set(this.listB, droppedIndex, draggedItem); // 将item移动到新位置
     }
   }

5. 对于 SortableJS，你需要提供类似这样的配置：

   methods: {
     optionsA: {
       group: '__group__', // 指定哪些元素可以互相拖动
       animation: 150,
       onEnd: (event) => {
         this.handleDrop(event);
       },
     },
   }

6. 当一个元素从 `listA` 被拖放到 `listB`，在 `handleDrop` 方法中处理数据的变化，确保同步。