jQuery UI可排序忽略与项目不匹配的项目选择器

对于包含两个分组级别的表，我有一个特殊情况。我正在处理一些遗留代码，这些代码使用表格构造和交错的“group”和“member”类来显示具有所有关联成员的组的层次结构。jQuery UI可排序忽略与项目不匹配的项目选择器

下面是一个简化的表：

<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”行 - 我不想要的东西。

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

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

不幸的是，“取消”动作导致：TypeError "null is not an object" (this.helper.outerWidth)和表显示器（移动后的“基团”的行被叠加与它下面的行）的损坏。

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

来源

2014-11-24 phantom

将'cancel'属性添加到可排序的初始值设定项中。 http://stackoverflow.com/a/5683299/1941466。另请参阅http://api.jqueryui.com/sortable/#option-cancel – Nunners 2014-11-24 08:32:15

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

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

如果使用items选项，不匹配的元素将完全由排序忽略，但如果你使用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>

来源

2014-11-24 14:42:14

为什么不直接使用手柄的选项？

$（ “＃MY_TABLE TBODY”）排序（{ 手柄： '成员'， forceHelperSize：真 }）。

来源

2016-05-13 20:10:26

jQuery UI可排序忽略与项目不匹配的项目选择器

回答

相关问题