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

Question

我有一个表，我希望将第一行分组，然后将其他行分组，当我尝试移动行时，它只适用于那些组。

这是我尝试的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>

我想要这样的东西。 class x rows可以在类x中移动，而y类行可以移动y类行。

Answer 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>

<强> JS

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

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

Online Demo (jsFiddle)