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可排序忽略與項目不匹配的項目選擇器

回答

相關問題