jQuery实现同组表格行可排序：分组内拖动限制需求

嘿，我懂你想要实现的效果——把表格行分成两组，前3行一组、剩下的另一组，拖动操作只能在各自组内进行对吧？你之前尝试两次初始化Sortable的思路方向是对的，但问题出在容器的选择上，因为你把整个table作为容器，导致拖动可以跨组。下面给你一个可行的解决方案：

1. 调整HTML结构，拆分tbody实现分组 #

表格允许包含多个tbody元素，我们可以把前3行和其余行分别放在独立的tbody里，这样天然形成两个独立的拖动容器：

<table class="sorted_table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <!-- 第一组：前3行 -->
  <tbody class="group-1">
    <tr class="x">
      <td>行1</td>
      <td>内容1</td>
    </tr>
    <tr class="x">
      <td>行2</td>
      <td>内容2</td>
    </tr>
    <tr class="x">
      <td>行3</td>
      <td>内容3</td>
    </tr>
  </tbody>
  <!-- 第二组：其余行 -->
  <tbody class="group-2">
    <tr class="y">
      <td>行4</td>
      <td>内容4</td>
    </tr>
    <tr class="y">
      <td>行5</td>
      <td>内容5</td>
    </tr>
    <tr class="y">
      <td>行6</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

2. 分别初始化每组的Sortable #

现在针对每个tbody单独初始化Sortable，这样拖动就只会在各自的组内生效：

// 初始化第一组（前3行）的拖动功能
$('.group-1').sortable({
  itemSelector: 'tr.x',
  placeholder: '<tr class="placeholder"/>'
});

// 初始化第二组（其余行）的拖动功能
$('.group-2').sortable({
  itemSelector: 'tr.y',
  placeholder: '<tr class="placeholder"/>'
});

3. 添加占位符样式（可选） #

为了让拖动时的占位效果更明显，可以添加简单的CSS：

.placeholder {
  background-color: #f0f0f0;
  height: 32px;
}

为什么之前的方法不生效？ #

你之前在整个table元素上两次初始化Sortable，会导致两个Sortable实例冲突，而且整个table作为容器的话，拖动范围是整个表格，自然会出现跨组拖动的情况。拆分tbody后，每个组有独立的容器，Sortable只会监听当前容器内的行操作，完美实现你要的组内拖动限制。

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