table 列表拖拽排序

实现列表拖拽排序的方法有很多种，这里介绍一种基于HTML5的拖拽API实现的方法。

首先，需要用HTML的table标签创建一个表格，每行作为一个拖拽项。然后，在每个表格行中添加一个`draggable="true"`属性来启用拖拽功能。接着，给每个表格行添加`ondragstart`和`ondragover`事件处理程序。

在`ondragstart`事件处理程序中，需要设置拖拽数据（即要拖拽的行的数据）以及拖拽效果。例如：

<tr draggable="true" ondragstart="dragStartHandler(event)">
  <td>Item 1</td>
  <td>Item 2</td>
  <td>Item 3</td>
</tr>

<script>
function dragStartHandler(event) {
  // 设置拖拽数据
  event.dataTransfer.setData("text/plain", event.target.innerHTML);
  // 设置拖拽效果
  event.dataTransfer.effectAllowed = "move";
}
</script>

在`ondragover`事件处理程序中，需要阻止默认行为并设置拖拽效果。例如：

<tr draggable="true" ondragstart="dragStartHandler(event)" ondragover="dragOverHandler(event)">
  <td>Item 1</td>
  <td>Item 2</td>
  <td>Item 3</td>
</tr>

<script>
function dragOverHandler(event) {
  // 阻止默认行为
  event.preventDefault();
  // 设置拖拽效果
  event.dataTransfer.dropEffect = "move";
}
</script>

最后，在`ondrop`事件处理程序中，需要获取拖拽数据并重新排列表格行。例如：

<tr draggable="true" ondragstart="dragStartHandler(event)" ondragover="dragOverHandler(event)" ondrop="dropHandler(event)">
  <td>Item 1</td>
  <td>Item 2</td>
  <td>Item 3</td>
</tr>

<script>
function dropHandler(event) {
  // 阻止默认行为
  event.preventDefault();
  // 获取拖拽数据
  const data = event.dataTransfer.getData("text/plain");
  // 重新排列表格行
  event.target.innerHTML = data;
}
</script>

以上代码仅为示例，具体实现还需要根据实际情况进行调整。