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

Posted 2023-02-24

【中文标题】如何在可排序列表中排除元素被拖动？

【英文标题】：How to exclude an element from being dragged in sortable list?

【发布时间】：2012-12-02 20:48:19

【问题描述】：

如何从可排序列表中排除元素？例如，有一个类名为“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 可排序，jquery not 显然不行...

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

【参考方案1】：

您需要使用取消。

查看工作示例here。

Js：

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

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

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

【讨论】：

@lauthiamkok 没问题，我刚刚根据您的具体问题调整了我的答案，所以请查看。 :)

是的，我注意到您编辑了答案。感谢您的编辑！ :-D

没问题！很高兴它有帮助！

小心：此解决方案确实会阻止项目可拖动，但仍然可以在其周围移动兄弟可拖动元素。

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

【参考方案2】：

您可以使用 sortable 的“items”选项：

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

example

或者...

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

example

【讨论】：

这也适用于包含数据集的<tr> 标签：$("#table").sortable(items: "[data-real-line]");。

【参考方案3】：

您可以通过以下方式明确排除项目：

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