拖拽排序原理与实现分析

分析

1. 鼠标在某一行中按下
2. 移动鼠标位置
3. 产生对应的替换样式
4. 鼠标抬起，表格行顺序发生变化

依据以上的业务，那么实现该功能的核心就在于：监听鼠标事件，完成对应的 UI 视图处理

具体来说：

1. 监听鼠标的按下事件
2. 监听鼠标的移动事件
3. 生成对应的 UI 样式
4. 监听鼠标的抬起事件

整个 拖动排序 的核心实现，就是围绕着 sortablejs 这个lib来进行的
那么以此，我们得出最终的实现方案：

1. 利用 sortablejs 实现表格拖拽功能
2. 在拖拽完成后，调用接口完成排序

实现

安装：npm i sortablejs@1.14.0

import {
  ref
} from 'vue'
import Sortable from 'sortablejs'
import i18n from '@/i18n'
import {
  articleSort
} from '@/api/article'
import {
  ElMessage
} from 'element-plus'

// 排序相关
export const tableRef = ref(null)

/**
 * 初始化排序
 */
export const initSortable = (tableData, cb) => {
  // 获取tbody的DOM
  const el = tableRef.value.$el.querySelectorAll(
    '.el-table__body-wrapper > table > tbody'
  )[0]
  // 1. 要拖拽的元素
  // 2. 配置对象
  Sortable.create(el, {
    // 拖拽时类名
    ghostClass: 'sortable-ghost',
    // 拖拽结束的回调方法
    async onEnd(event) {
      // 获取发生改变的行之前与现在的index
      const {
        newIndex,
        oldIndex
      } = event
      // 修改数据
      await articleSort({
        initRanking: tableData.value[oldIndex].ranking,
        finalRanking: tableData.value[newIndex].ranking
      })
      ElMessage.success({
        message: i18n.global.t('msg.article.sortSuccess'),
        type: 'success'
      })
      // 直接重新获取数据无法刷新 table！！
      tableData.value = []
      // 重新获取数据
      cb && cb()
    }
  })
}