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

Question

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

这是一个简化的表格:

<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 可排序来允许用户将成员表行拖放到表中的所需位置:

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

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

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

我尝试删除“items”选项并添加“start”事件处理程序，以在尝试移动“group”行时取消可排序。

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

不幸的是，“取消”操作会导致:TypeError“null is not an object”(this.helper.outerWidth)以及表格显示损坏(移动的“group”行被叠加)及其下面的行)。

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

Answer 1

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

Prevents sorting if you start on elements matching the selector.

如果你使用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>