js怎么实现拖拽表格的单元行，换位置

在JavaScript中，你可以使用HTML5的`draggable`属性以及`ondragstart`、`ondragover`、`ondrop`事件来实现表格单元格的拖动和交换位置。下面是一个简单的示例：

<table id="myTable" ondragstart="dragStart(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
  <!-- 表格行 -->
  <tr draggable="true">
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <!-- 更多行... -->
</table>

<script>
function dragStart(e) {
  e.dataTransfer.setData("text/plain", e.target.id); // 设置数据，通常是元素ID
  e.target.classList.add('dragging'); // 添加拖动状态样式
}

function allowDrop(e) {
  if (e.preventDefault) {
    e.preventDefault(); // 阻止默认效果，防止阻止选择
  }
  return false;
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var data = e.dataTransfer.getData("text/plain"); // 获取拖动的数据，这里是元素ID

  var sourceElement = document.getElementById(data);
  var targetParent = this; // 接收目标的位置，通常是当前鼠标点击的元素

  while (!targetParent.contains(sourceElement)) { // 检查是否已经进入新的容器
    sourceElement = sourceElement.parentNode;
  }

  targetParent.insertBefore(sourceElement, this.nextElementSibling); // 将元素插入到目标之后
  e.target.classList.remove('dragging'); // 移除拖动状态样式
}
</script>

在这个例子中，当你开始拖动单元格时，会触发`dragStart`函数并设置数据。在拖放到另一个位置时，`drop`函数会被触发，它从数据中获取源元素，并将其移动到新位置。

请注意这只是一个基本的实现，实际应用中可能需要考虑更多因素，比如兼容性处理、处理多级嵌套的表格等。此外，`ondragend`事件也可以用来清理可能的额外操作。