jquery中具有相同组的可排序行答案

【问题标题】：sortable row with same group in jqueryjquery中具有相同组的可排序行
【发布时间】：2018-03-27 11:19:28
【问题描述】：

我有一个表，我想对第 3 行进行分组，然后对其他行进行分组，当我尝试移动行时，它只适用于这些组。

这是我尝试的 jsfiddle：Click Here。

// Sortable rows
 $('.sorted_table').sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr.x',
  placeholder: '<tr class="placeholder"/>'
}); 

$('.sorted_table').sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr.y',
  placeholder: '<tr class="placeholder"/>'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js"></script>
<table class="table table-striped table-bordered sorted_table">
                <thead>
                  <tr>
                    <th>A Column</th>
                    <th>B Column</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="x">
                    <td>A Item 2</td>
                    <td>B Item 2</td>
                  </tr><tr class="x">
                    <td>A Item 5</td>
                    <td>B Item 5</td>
                  </tr><tr class="x">
                    <td>A Item 4</td>
                    <td>B Item 4</td>
                  </tr>
                  <tr class="y">
                    <td>A Item 6</td>
                    <td>B Item 6</td>
                  </tr>
                  
                  
                  
                  <tr class="y">
                    <td>A Item 3</td>
                    <td>B Item 3</td>
                  </tr><tr class="y">
                    <td>A Item 1</td>
                    <td>B Item 1</td>
                  </tr>
                </tbody>
              </table>

我想要这样的东西。 x 类行可以在 x 类内移动，y 类行可以在 y 类行内移动。

【问题讨论】：

标签： jquery html html-table jquery-ui-sortable

【解决方案1】：

你可以这样做：

HTML

<table class="table table-striped table-bordered sorted_table">
  <thead>
    <tr>
      <th>A Column</th>
      <th>B Column</th>
    </tr>
  </thead>
  <tbody class="x">
    <tr>
      <td>A Item 2</td>
      <td>B Item 2</td>
    </tr>
    <tr>
      <td>A Item 5</td>
      <td>B Item 5</td>
    </tr>
    <tr>
      <td>A Item 4</td>
      <td>B Item 4</td>
    </tr>

  </tbody>

  <tbody class="y">
   <tr>
      <td>A Item 6</td>
      <td>B Item 6</td>
    </tr>
    <tr>
      <td>A Item 3</td>
      <td>B Item 3</td>
    </tr>
    <tr>
      <td>A Item 1</td>
      <td>B Item 1</td>
    </tr>
  </tbody>
</table>

// Sortable rows with class x
$('.sorted_table').find('.x').sortable();

// Sortable rows with class y
$('.sorted_table').find('.y').sortable();

Online Demo (jsFiddle)

【讨论】：