vue3之 使用SortableJs插件进行表格内的数据项拖拽排序

 1、安装Sortablejs插件

npm i sortablejs --save

yarn add sortablejs 

 2、引入到项目中

import { default as Sortable, SortableEvent } from 'sortablejs';

<n-data-table
        max-height="350"
        :row-key="(row:TypeDataItem) => row.id"
        :bordered="false"
        scroll-x="2280"
        class="draggable a-percent"
        size="small"
        :columns="columns"
        :data="data"
        :checked-row-keys="checkRowKeys"
        @update:checked-row-keys="handleTableCheck"
/>

具体实现方法 ：

（1）首先，获取表格的Dom元素，在Sortable构造函数中进行绑定
（2）我主要使用的是Sortablejs 中的结束拖拽之后的onEnd 属性，因为是单表格的简单拖拽排

         序所以只用到了自带的参数对象evt的oldIndex和newIndex这两个属性，分别表示被拖拽

          的数据项拖拽前的下标和拖拽完成之后的下标。

          onEnd回调函数中的主要逻辑就是根据被操作的数据项的新旧下标的大小来进行判断的

（3）当oldIndex<newIndex时，说明是向下拖拽
     之后的代码的核心思想是：

1，创建一个临时变量保存被拖拽的数据项 temp = tableData[oldIndex] 

2，将数组中索引为oldIndex+1~newIndex中的数据依次向前一位赋值

3，最后将临时变量temp对tableData[newIndex]进行赋值tableData[newIndex] = temp

（4）当oldIndex>newIndex时，说明是向上拖拽
     代码逻辑同上

1，创建一个临时变量保存被拖拽的数据项temp = tableData[oldIndex]

2,将数组中索引为newIndex~oldIndex-1的元素依次向后一位赋值

3，最后将临时变量temp对tableData[newIndex]进行赋值tableData[newIndex] = temp;

当做完这些操作之后只能保证表格中的数据项和数据下标是对着的，但是此时表格中的数据项之间还是乱序的，需要重新调用接口进行排序。

// 行拖拽
const rowDrag = () => {
  // 要拖拽元素的父容器
  const tbody = document.querySelector('.draggable .n-data-table-wrapper .n-data-table-table tbody');
  if (!tbody) return;
  Sortable.create(tbody as HTMLElement, {
    draggable: '.draggable .n-data-table-tr',
    handle: '.my-handle',
    forceFallback: true,
    ghostClass: 'active-handle',
    onEnd(event: SortableEvent) {     // 具体的拖拽方法
      
      if (event.oldIndex !== undefined && event.newIndex !== undefined) {
       //  在列表中所有数据，从索引拖拽的行event.oldIndex开始删除1个
        const currRow = data.value.splice(event.oldIndex, 1)[0];  // 所拖拽行的列表信息
       //  拖动到新的位置的索引，插入旧的拖拽行的信息
        data.value.splice(event.newIndex, 0, currRow);  
      }
      const newIndex = (page.value - 1) * limit.value + event.newIndex!;
      const oldIndex = (page.value - 1) * limit.value + event.oldIndex!;
      const newData = data.value[event.newIndex!];
      //   之后接口调用
    },
  });
};