Question

我有一个包含两个级别分组的表的特殊情况。我正在处理一些使用表格结构的遗留代码，这些表格构造具有交叉排列的类＆＃34; group＆＃34;和＆＃34;会员＆＃34;显示具有所有相关成员的组的层次结构。

这是一个简化的表格：

<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 });

我可以拖动＆＃34;成员＆＃34;其他＆＃34;成员＆＃34;行重新排序...这部分工作正常，但我不能拖动＆＃34;成员＆＃34;行低于＆＃34; D组＆＃34; （因为它下面没有＆＃34;成员＆＃34;行）。

如果我删除了＆＃39;项目＆＃39;选项，然后＆＃34;组＆＃34;也可以拖动行 - 这是我不想要的。

我试图移除＆＃39;项目＆＃39;选项并添加一个＆＃39; start＆＃39;事件处理程序取消可排序的＆＃34;组＆＃34;尝试移动行。

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

不幸的是，取消＆＃39;操作导致：TypeError "null is not an object" (this.helper.outerWidth)并且表格显示损坏（移动的＆＃34;组＆＃34;行与其下方的行重叠）。

任何人都有另一种方法来抑制＆＃34;组＆＃34;的可拖动性。行（同时仍然允许＆＃34;成员＆＃34;行被拖动到表中的任何行位置）？

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：true }）;

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

2 个答案: