分析

1. 滑鼠在某一行中按下
2. 移動滑鼠位置
3. 產生對應的替換樣式
4. 滑鼠抬起，表格行順序發生變化

依據以上的業務，那麼實現該功能的核心就在於：監聽滑鼠事件，完成對應的 UI 檢視處理

具體來說：

1. 監聽滑鼠的按下事件
2. 監聽滑鼠的移動事件
3. 生成對應的 UI 樣式
4. 監聽滑鼠的抬起事件

整個 拖動排序 的核心實現，就是圍繞著 sortablejs 這個lib來進行的
那麼以此，我們得出最終的實現方案：

1. 利用 sortablejs 實現表格拖拽功能
2. 在拖拽完成後，呼叫介面完成排序

實現

安裝：npm i [email protected]

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()
    }
  })
}