vue3中javascript 使用 sortable 实现 table 拖拽排序功能

在Vue3中，使用Sortable库来实现表格（table）的拖拽排序功能非常方便。Sortable是一个强大的JavaScript库，用于创建可交互的拖放排序功能。以下是使用Sortable的主要步骤：

1. 安装Sortable库：
首先需要安装`@Sortablejs/sortablejs`库，可以使用npm或yarn命令行工具：

   npm install @sortablejs/sortablejs

2. 引入并配置Sortable：
在你的组件文件中，引入Sortable并设置其选项：

   import { Sortable } from '@sortablejs/react';
   import SortableJS from 'sortablejs';

   // ...

   export default {
     setup() {
       const items = [
         // 这里是你表格数据的对象数组，每个对象都有一个用于排序的键
         { id: 1, name: 'Item 1' },
         { id: 2, name: 'Item 2' },
         // ...
       ];

       // 初始化Sortable实例，传入items和排序规则
       const sortableItems = Sortable.create(items, {
         group: '__item__', // 设置排序组名，防止跨元素拖动
         animation: 150, // 动画时间
         onEnd: ({ newIndex }) => {
           // 排序完成后更新数据状态
           this.items = items.slice().sort((a, b) => a.id - b.id);
         }
       });

       return {
         sortableItems,
         items
       };
     }
   }

3. 更新HTML模板：
在模板中，绑定Sortable到表格行上：

   <table>
     <tbody>
       <tr v-for="(item, index) in sortableItems.items" :key="item.id">
         <td>{{ item.name }}</td> <!-- 或其他列 -->
         <td @mousedown.prevent>
           <draggable-item :item="item" index="index"></draggable-item>
         </td>
       </tr>
     </tbody>
   </table>

4. `draggable-item`组件：
这个组件负责拖拽行为，并传递给Sortable处理：

   <template>
     <div class="draggable" :data-id="item.id">
       {{ item.name }}
       <button @dragstart.prevent>Drag</button>
     </div>
   </template>

   <script>
   export default {
     props: ['item', 'index']
   };
   </script>