实现表格间元素的拖拽、放置与交换功能

嘿，作为编程新手能自己尝试原生JS实现拖拽交换已经超棒了！我先帮你理清楚现有代码里的小问题，再给出完善的解决方案，也会补充下用jQuery UI实现交换的方法，方便你参考~

一、原生JS方案的修正与优化 #

首先你的HTML里有个小语法问题：<td>标签不能自闭合，比如<td id="drag1" draggable="true" ondragstart="drag(event)" />10</td>要改成<td id="drag1" draggable="true" ondragstart="drag(event)">10</td>，否则浏览器解析会出问题。

接下来是JS逻辑的优化，确保跨表格交换能稳定工作：

修正后的完整代码 #

<table class="connectedtable" border="1">
  <tr id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    <td id="drag1" draggable="true" ondragstart="drag(event)">10</td>
  </tr>
  <tr id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    <td id="drag2" draggable="true" ondragstart="drag(event)">20</td>
  </tr>
  <tr id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    <td id="drag3" draggable="true" ondragstart="drag(event)">30</td>
  </tr>
</table>
<br>
<table class="connectedtable" border="1">
  <tr id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    <td id="drag4" draggable="true" ondragstart="drag(event)">40</td>
  </tr>
  <tr id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    <td id="drag5" draggable="true" ondragstart="drag(event)">50</td>
  </tr>
  <tr id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    <td id="drag6" draggable="true" ondragstart="drag(event)">60</td>
  </tr>
</table>

<script>
function allowDrop(ev) {
  ev.preventDefault();
  // 添加拖拽时的视觉反馈，高亮目标行
  ev.currentTarget.style.backgroundColor = "#eee";
}

// 拖拽离开时移除高亮
function dragLeave(ev) {
  ev.currentTarget.style.backgroundColor = "";
}

function drag(ev) {
  // 用通用格式传递被拖拽元素的ID，兼容性更好
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "swap";
}

function drop(ev) {
  ev.preventDefault();
  // 移除目标行的高亮
  ev.currentTarget.style.backgroundColor = "";
  
  const srcId = ev.dataTransfer.getData("text/plain");
  const srcElement = document.getElementById(srcId);
  const srcParent = srcElement.parentNode; // 源元素的父节点（tr）
  
  // 获取目标行里的td元素
  const targetElement = ev.currentTarget.querySelector("td");
  
  // 执行交换操作：先把目标td放到源tr，再把源td放到目标tr
  srcParent.replaceChild(targetElement, srcElement);
  ev.currentTarget.replaceChild(srcElement, targetElement);
}
</script>

关键逻辑说明 #

• allowDrop函数：必须调用ev.preventDefault()，否则浏览器默认会阻止放置操作；额外添加的高亮样式能让用户更清晰地看到可放置区域。
• drag函数：使用"text/plain"格式传递元素ID，这是拖拽API的通用数据格式，避免兼容性问题。
• drop函数：核心是准确获取源元素、源父节点和目标元素，通过两次replaceChild完成位置交换，逻辑清晰易懂。

二、jQuery UI实现交换的方法 #

如果你还是想用jQuery UI，其实可以通过sortable组件结合事件来实现交换效果，步骤如下：

示例代码 #

<!-- 请确保先引入jQuery和jQuery UI的本地文件 -->

<table class="connectedtable" border="1">
  <tr><td>10</td></tr>
  <tr><td>20</td></tr>
  <tr><td>30</td></tr>
</table>
<br>
<table class="connectedtable" border="1">
  <tr><td>40</td></tr>
  <tr><td>50</td></tr>
  <tr><td>60</td></tr>
</table>

<script>
$(function() {
  // 给每个tr绑定sortable，允许跨表格连接拖拽
  $(".connectedtable tr").sortable({
    connectWith: ".connectedtable tr",
    helper: "clone", // 拖拽时显示克隆元素，提升体验
    revert: true, // 拖拽结束后平滑恢复动画
    receive: function(event, ui) {
      // 当元素被拖入当前tr时，执行交换逻辑
      const sourceTr = ui.item.parent();
      const currentTd = $(this).find("td");
      const sourceTd = sourceTr.find("td");
      
      // 调用自定义的swap方法交换两个td元素
      currentTd.swap(sourceTd);
      
      // 移除拖拽进来的克隆元素，保留交换后的真实元素
      ui.item.remove();
    }
  }).disableSelection();
  
  // 扩展jQuery的swap方法，用于快速交换两个元素的位置
  $.fn.swap = function(other) {
    const $this = this;
    const $other = $(other);
    const temp = $("<div>");
    
    $this.before(temp);
    $other.before($this);
    temp.before($other).remove();
    return $this;
  };
});
</script>

说明 #

• connectWith属性是跨表格拖拽的核心，它指定了哪些元素可以互相连接拖拽。
• receive事件会在元素被拖入当前容器时触发，我们在这里处理交换逻辑。
• 自定义的swap方法封装了元素交换的细节，让代码更简洁易读。

这样不管是原生JS还是jQuery UI，都能实现你想要的跨表格拖拽交换效果啦，你可以根据自己的习惯选择~

内容的提问来源于stack exchange，提问作者Tirant II