原生表格拖拽排序

原生表格的拖拽排序可以通过HTML5提供的Drag and Drop API来实现。以下是一个简单的示例：

HTML代码：

<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr draggable="true">
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr draggable="true">
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
    <tr draggable="true">
      <td>Bob</td>
      <td>40</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

const table = document.getElementById("my-table");
let draggingRow;

table.addEventListener("dragstart", (event) => {
  draggingRow = event.target;
});

table.addEventListener("dragover", (event) => {
  event.preventDefault();
  const targetRow = event.target.closest("tr");
  if (targetRow && targetRow !== draggingRow) {
    table.tBodies[0].insertBefore(draggingRow, targetRow);
  }
});

table.addEventListener("dragend", () => {
  draggingRow = null;
});

在这个示例中，我们给每一行添加了 `draggable="true"` 属性，表示该行可以被拖拽。我们在表格上监听 `dragstart` 事件，当用户开始拖拽某一行时，将该行保存到 `draggingRow` 变量中。接着我们监听 `dragover` 事件，在该事件中阻止默认行为，并找到当前鼠标指针所在的行。如果找到了该行并且不是正在拖拽的行，则将正在拖拽的行插入到该行之前。最后，我们在 `dragend` 事件中将 `draggingRow` 变量重置为 `null`。

这样，我们就实现了原生表格的拖拽排序功能。需要注意的是，该示例只是一个基础的示例，实际使用中可能需要根据具体的需求进行更复杂的逻辑处理。