如何用jQuery.sortable实现表格分组内tr元素仅组内排序？

这个问题我之前处理过，确实因为所有行都是同级的<tr>元素，jQuery UI Sortable默认会把它们都纳入可排序范围，才导致了跨组拖拽的问题。这里有两种实用的解决办法，你可以根据需求选择：

方案一：调整表格结构（推荐，更简洁） #

HTML允许一个<table>包含多个<tbody>标签，我们可以把每个分组的标题行和数据行单独放在一个<tbody>里，这样就能天然隔离不同组的可排序元素：

修改后的HTML结构：

<table border=1>
  <tbody class="sortable-group">
    <tr>
      <td colspan="3">Group 1</td>
    </tr>
    <tr class="sortable-row">
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr class="sortable-row">
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr class="sortable-row">
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </tbody>
  <tbody class="sortable-group">
    <tr>
      <td colspan="3">Group 2</td>
    </tr>
    <tr class="sortable-row">
      <td>A4</td>
      <td>B4</td>
      <td>C4</td>
    </tr>
    <tr class="sortable-row">
      <td>A5</td>
      <td>B5</td>
      <td>C5</td>
    </tr>
    <tr class="sortable-row">
      <td>A6</td>
      <td>B</td>
      <td>C6</td>
    </tr>
  </tbody>
</table>

对应的jQuery代码：

$('.sortable-group').sortable({
  items: '.sortable-row', // 只允许带这个类的数据行被排序
  containment: 'parent', // 限制拖拽范围在当前tbody内部
  helper: 'clone' // 用克隆元素作为拖拽助手，避免表格布局错乱
}).disableSelection();

这个方案的优势是逻辑简单，利用HTML原生的tbody分组来隔离元素，维护起来也方便。

方案二：不修改HTML结构，用事件拦截跨组拖拽 #

如果不想调整现有HTML结构，可以通过Sortable的事件来判断拖拽行为是否跨组，进而阻止非法拖拽：

先给分组标题行加个类（比如group-header），原HTML调整一下：

<table border=1>
  <tbody>
    <tr class="group-header">
      <td colspan="3">Group 1</td>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
    <tr class="group-header">
      <td colspan="3">Group 2</td>
    </tr>
    <tr>
      <td>A4</td>
      <td>B4</td>
      <td>C4</td>
    </tr>
    <tr>
      <td>A5</td>
      <td>B5</td>
      <td>C5</td>
    </tr>
    <tr>
      <td>A6</td>
      <td>B</td>
      <td>C6</td>
    </tr>
  </tbody>
</table>

对应的jQuery代码：

let currentDragGroup = null;

$('table tbody').sortable({
  items: 'tr:not(.group-header)', // 排除标题行，不让它们被拖拽
  start: function(event, ui) {
    // 记录当前拖拽行所属的分组（向上找最近的标题行）
    currentDragGroup = ui.item.prevAll('.group-header').first();
  },
  over: function(event, ui) {
    // 判断目标位置所属的分组
    const targetGroup = ui.placeholder.prevAll('.group-header').first();
    // 如果不是同一个组，隐藏占位符提示不能放置
    if (currentDragGroup[0] !== targetGroup[0]) {
      ui.placeholder.hide();
    } else {
      ui.placeholder.show();
    }
  },
  receive: function(event, ui) {
    // 接收拖拽元素时再做一次校验，跨组就取消拖拽
    const targetGroup = ui.item.prevAll('.group-header').first();
    if (currentDragGroup[0] !== targetGroup[0]) {
      ui.sender.sortable('cancel');
    }
  },
  helper: 'clone'
}).disableSelection();

这个方案适合不能修改现有HTML结构的场景，通过事件监听来拦截跨组的拖拽操作，确保每个组的行只能在内部排序。

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