JQuery 可排序 tr

Question

我有 html table 如下所示，我希望 "Group 1" 项仅在 "Group 1" 项之间排序。

我正在使用 jQuery.sortable。

由于都是 table 行 (tr)，我无法限制一个组项目与另一个组项目一起排序。

<table border=1>
  <tbody>
    <tr>
      <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>
      <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>

Answer 1

您可以在 tr 中添加 class，例如 class="group1"，然后使用 connectWith: ".group1"，如下所示：

$(".group1").sortable({
 connectWith: ".group1"
});

Online demo (fiddle)