如何使用jQuery实现点击td时一次性拖拽其所在tr的所有td至其他tbody

要实现点击任意td即可将其所在tr的所有td作为整体拖拽到其他tbody，你需要调整jQuery UI Sortable的配置，同时处理拖拽单元的逻辑，以下是具体实现：

1. 引入必要依赖 #

确保同时引入jQuery和jQuery UI（你的代码里缺少jQuery UI，这是Sortable功能的核心依赖）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
/* 基础样式，提升拖拽体验 */
.sortable { cursor: move; }
.ui-state-highlight { height: 30px; background-color: #f0f0f0; border: 1px dashed #ccc; }
td { padding: 8px; border: 1px solid #ddd; }
tbody { border: 1px solid #999; margin: 10px 0; display: block; padding: 5px; }
</style>

2. 调整HTML结构 #

保持你的tbody结构，每个tbody包含一个tr：

<table>
  <tbody class="sortable">
    <tr>
      <td>元素1</td>
      <td>元素2</td>
      <td>元素3</td>
    </tr>
  </tbody>

  <tbody class="sortable">
    <tr>
      <td>元素1</td>
      <td>元素2</td>
      <td>元素3</td>
      <td>元素4</td>
    </tr>
  </tbody>

  <tbody class="sortable">
    <tr>
      <td>元素1</td>
      <td>元素2</td>
      <td>元素3</td>
      <td>元素4</td>
      <td>元素5</td>
    </tr>
  </tbody>
</table>

3. 配置Sortable实现整体拖拽 #

根据你的实际需求选择对应场景的实现：

场景1：将整个tr（含所有td）移动到目标tbody #

如果需要把整个tr转移到另一个tbody（每个tbody可容纳多个tr），使用以下配置：

$('.sortable').sortable({
  revert: true,
  connectWith: ".sortable",
  placeholder: "ui-state-highlight",
  items: 'tr', // 指定拖拽单元为tr
  handle: 'td' // 允许点击任意td触发拖拽
}).disableSelection();

场景2：将tr的所有td合并到目标tbody的现有tr中 #

如果需要把当前tr的所有td合并到目标tbody的tr里（移动后原tr自动移除），使用以下配置：

$('.sortable').sortable({
  revert: true,
  connectWith: ".sortable",
  placeholder: "ui-state-highlight",
  items: 'td',
  start: function(event, ui) {
    // 拖拽开始时，将当前td所在tr的所有td整合为一个拖拽单元
    ui.helper = $('<tr></tr>').append(ui.item.siblings().addBack());
    // 隐藏原tr避免视觉干扰
    ui.item.parent().hide();
  },
  stop: function(event, ui) {
    // 将拖拽的td添加到目标tbody的tr中
    ui.item.closest('.sortable').find('tr').append(ui.helper.children());
    // 移除原空tr
    ui.item.parent().remove();
    // 刷新Sortable以适配DOM变化
    $('.sortable').sortable('refresh');
  }
}).disableSelection();

注意事项 #

因为你的td是AJAX动态生成的，需要在AJAX请求完成后，重新初始化Sortable或调用$('.sortable').sortable('refresh')更新组件状态，确保新生成的td能触发拖拽功能。

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