如何在可排序列表中排除一个元素不被拖动？

Question

如何从可排序列表中排除一个元素？例如，有一个类名为“note”的元素，我不想使其可以拖动。

    <ul class="sortable">

            <li id="item_3">Item 3</li>
            <li id="item_4">Item 4</li>
            <li id="item_5">Item 5</li>

            <p class="note">This is a note only</p> 
   </ul>

jQuery UI Sortable，jQuery的not明显不起作用...

$(function() {
    $( ".sortable:not(.note)" ).sortable(
    }).disableSelection();
});

- Run

Answer 1

您需要使用cancel。

在这里可以看到一个工作示例。

Js：

$(function() {
    $('.sortable').sortable();
    $('.sortable').disableSelection();
    $('.sortable').sortable({ cancel: '.note' });
});​

正如 @Zephyr 指出的那样，这让你可以通过拖动兄弟节点来重新排列位置，如果你想避免这种情况，请使用 owise1 的方法：

$('.sortable').sortable({
    items : ':not(.note)'
});

- Trufa

---

注意：这个解决方案确实可以防止该项被拖动，但仍然可能移动它周围的可拖动兄弟元素。 - Zephyr

在我的情况下，仅使用 ":not(.any-class)" 会破坏可排序行为，因为选择器过于普遍并适用于后代 DOM 元素。我使用了 "> :not(.any-class)" 来解决这个问题，因为 items 的默认值是 "> *"。Sortable Widget: items - Nils

Answer 2

您可以使用sortable的"items"选项：

$( ".sortable" ).sortable({
    items : 'li'
});

例子

或者...

$( ".sortable" ).sortable({
    items : ':not(.note)'
});

例子

- owise1

---

这个方法同样可以用于包含数据集的<tr>标签：$("#table").sortable({items: "[data-real-line]"});。 - Amin NAIRI

Answer 3

您可以使用以下方法明确排除项目：

$( ".sortable" ).sortable({
     cancel: ".disable-sorting"
});

- Mladen Janjetovic