sortablejs实现可拖拽排序表格

sortablejs是功能强大的JavaScript 拖拽库

1.安装sortablejs

npm install sortablejs --save

2.以拖拽表格为例，先在模板中写一个表格

<template>
  <el-table :data="tableData" style="width: 100%" border row-key="key">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" width="380" />
  </el-table>
</template>

<script setup lang="ts">
import Sortable from "sortablejs";
import { onMounted, ref } from "vue";
interface User {
  key: number;
  date: string;
  name: string;
  address: string;
}
const tableData: User = [
  {
    key: 1,
    date: "2016-05-01",
    name: "Tom1",
    address: "第一行",
  },
  {
    key: 2,
    date: "2016-05-02",
    name: "Tom2",
    address: "第二行",
  },
  {
    key: 3,
    date: "2016-05-03",
    name: "Tom3",
    address: "第三行",
  },
  {
    key: 4,
    date: "2016-05-04",
    name: "Tom4",
    address: "第四行",
  },
  {
    key: 5,
    date: "2016-05-05",
    name: "Tom5",
    address: "第五行",
  },
];

function rowDrop() {
  // 要侦听拖拽响应的DOM对象
  const tbody = document.querySelector(".el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    // 结束拖拽后的回调函数
    onEnd({ newIndex, oldIndex }) {
      const currentRow = tableData.splice(oldIndex, 1)[0];
      tableData.splice(newIndex, 0, currentRow);
      console.log("tableData", tableData);
    },
  });
}
onMounted(() => {
  rowDrop();
});
</script>