table表格 行拖拽排序

要实现表格行的拖拽排序，可以考虑以下步骤：

1. 给每一行添加一个可拖拽的属性，例如设置行的 draggable 属性为 true。
2. 监听行的拖拽事件，当拖拽开始时，记录被拖拽的行的位置和数据。
3. 监听拖拽过程事件，计算拖拽行与其它行的位置关系，根据位置关系决定拖拽行的插入位置。
4. 监听拖拽结束事件，根据插入位置将拖拽行插入到表格中，并更新表格中其它行的位置。

具体实现可以参考以下代码：

<table id="sortable-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr draggable="true">
      <td>Alice</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr draggable="true">
      <td>Bob</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
    <tr draggable="true">
      <td>Charlie</td>
      <td>20</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

const table = document.getElementById('sortable-table');
let draggedRow = null;

table.addEventListener('dragstart', e => {
  draggedRow = e.target.parentNode;
  e.dataTransfer.setData('text/html', e.target.innerHTML);
});

table.addEventListener('dragover', e => {
  e.preventDefault();
  const targetRow = e.target.parentNode;
  if (targetRow !== draggedRow) {
    const rect = targetRow.getBoundingClientRect();
    const isAfter = e.clientY > rect.top + rect.height / 2;
    table.insertBefore(draggedRow, isAfter ? targetRow.nextSibling : targetRow);
  }
});

table.addEventListener('dragend', () => {
  draggedRow = null;
});

在这个示例代码中，我们给表格中的每一行添加了 draggable 属性，并分别监听了 dragstart、dragover 和 dragend 事件，实现了表格行的拖拽排序。