jQuery UI Sortable 忽略与项目选择器不匹配的项目

Question

我有一个包含两个级别分组的表的特殊情况。我正在处理一些遗留代码，这些代码使用具有交错行的类“组”和“成员”的表构造来显示组的层次结构及其所有关联成员。

这是一个简化的表格：

<table id="my_table">  
  <thead>  
    <tr>
      <th>column 1</th>
    </tr>
  </thead>
  <tbody>
    <tr class="group">
      <td>group A</td>
    </tr>
    <tr class="member">
      <td>member A1</td>
    </tr>
    <tr class="member">
      <td>member A2</td>
    </tr>
    <tr class="group">
      <td>group B</td>
    </tr>
    <tr class="group">
      <td>group C</td>
    </tr>
    <tr class="member">
      <td>member C1</td>
    </tr>
    <tr class="member">
      <td>member C2</td>
    </tr>
    <tr class="member">
      <td>member C3</td>
    </tr>
    <tr class="group">
      <td>group D</td>
    </tr>
  </tbody>
</table>

我正在尝试使用 jQuery sortable 来允许用户将成员表行拖放到表中的所需位置：

$("#my_table tbody").sortable({items: '> .member', forceHelperSize: true });

我可以将“成员”行拖到其他“成员”行中以对其重新排序...该部分工作正常，但我无法拖动“成员”行下面“ D 组”（因为它下面没有“成员”行）。

如果我删除“项目”选项，那么“组”行也可以被拖动——这是我不想要的。

如果尝试移动“组”行，我尝试删除“项目”选项并添加“开始”事件处理程序以取消可排序。

start: function(event, ui) {
  if (ui.item.hasClass("group")) {
    $(this).sortable('cancel');  
  }
}

不幸的是，“取消”操作导致：TypeError "null is not an object" (this.helper.outerWidth) 和表格显示损坏（移动的“组”行与其下方的行叠加）。

任何人有另一种方法来抑制“组”行的可拖动性（同时仍然允许将“成员”行拖动到表格中的任何行位置）？

Answer 1

您可以通过将.group 指定为cancel 选项的值来解决此问题。

如果您从匹配选择器的元素开始，则阻止排序。

如果你使用items选项，不匹配的元素将被sortable完全忽略，但如果你使用cancel代替，元素将被考虑但不会被拖动。

$("#my_table tbody").sortable({
  cancel: ".group",
  forceHelperSize: true
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table id="my_table">
  <thead>
    <tr>
      <th>column 1</th>
    </tr>
  </thead>
  <tbody>
    <tr class="group">
      <td>group A</td>
    </tr>
    <tr class="member">
      <td>member A1</td>
    </tr>
    <tr class="member">
      <td>member A2</td>
    </tr>
    <tr class="group">
      <td>group B</td>
    </tr>
    <tr class="group">
      <td>group C</td>
    </tr>
    <tr class="member">
      <td>member C1</td>
    </tr>
    <tr class="member">
      <td>member C2</td>
    </tr>
    <tr class="member">
      <td>member C3</td>
    </tr>
    <tr class="group">
      <td>group D</td>
    </tr>
  </tbody>
</table>

Answer 2

为什么不在选项中使用句柄？

$("#my_table tbody").sortable({ 句柄：'.member'， forceHelperSize: 真 });