js 原生表格拖拽排序

要实现表格的拖拽排序，需要以下几个步骤：

1. 给表格中需要排序的行添加可拖拽属性 `draggable="true"`。

2. 监听拖拽事件 `dragstart`，并将拖拽的行的索引存储到数据属性中。

3. 监听目标放置事件 `drop`，并根据拖拽行的索引和目标行的索引交换两行的位置。

4. 阻止默认的拖拽行为 `dragover` 和 `drop` 事件。

下面是一个简单的实现示例：

HTML 代码：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr draggable="true" data-index="0">
      <td>1</td>
      <td>Alice</td>
      <td>25</td>
    </tr>
    <tr draggable="true" data-index="1">
      <td>2</td>
      <td>Bob</td>
      <td>30</td>
    </tr>
    <tr draggable="true" data-index="2">
      <td>3</td>
      <td>Charlie</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

JavaScript 代码：

const table = document.querySelector('table');
const tbody = table.querySelector('tbody');

let dragIndex;

tbody.addEventListener('dragstart', e => {
  dragIndex = e.target.dataset.index;
});

tbody.addEventListener('dragover', e => {
  e.preventDefault();
});

tbody.addEventListener('drop', e => {
  e.preventDefault();
  const dropIndex = e.target.parentElement.dataset.index;
  if (dragIndex !== dropIndex) {
    const dragRow = tbody.querySelector(`[data-index="${dragIndex}"]`);
    const dropRow = tbody.querySelector(`[data-index="${dropIndex}"]`);
    const tempRow = document.createElement('tr');
    dropRow.before(tempRow);
    dragRow.before(dropRow);
    tempRow.replaceWith(dragRow);
  }
});

在上面的代码中，我们给表格中的每一行添加了一个 `data-index` 数据属性，用于存储行的索引。在拖拽开始时，我们将拖拽行的索引存储到 `dragIndex` 变量中。在目标行放置时，我们获取目标行的索引，如果拖拽行和目标行的索引不同，就交换两行的位置。具体实现是通过创建一个临时行，将目标行插入到临时行前面，再将拖拽行插入到目标行前面，最后将临时行替换为拖拽行。注意要阻止默认的拖拽行为，否则无法触发目标放置事件。