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

lau*_*kok 34 jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

如何从可排序列表中排除元素?举例来说,有使用类名称"笔记",我的元素并不拖动

    <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>
Run Code Online (Sandbox Code Playgroud)

jquery ui sortable,jquery not显然不起作用......

$(function() {
    $( ".sortable:not(.note)" ).sortable(
    }).disableSelection();
});
Run Code Online (Sandbox Code Playgroud)

Tru*_*ufa 42

你需要使用取消.

见工作示例这里.

JS:

$(function() {
    $('.sortable').sortable();
    $('.sortable').disableSelection();
    $('.sortable').sortable({ cancel: '.note' });
});?
Run Code Online (Sandbox Code Playgroud)

正如@Zephyr指出的那样,让你通过拖动兄弟姐妹来重新安排这个位置,如果你想避免这种情况,请使用owise1方法:

$('.sortable').sortable({
    items : ':not(.note)'
});
Run Code Online (Sandbox Code Playgroud)

  • 小心:这个解决方案确实会阻止项目可拖动,但仍然可以在它周围移动兄弟可拖动元素. (4认同)
  • 在我的情况下,仅使用`“:not(.any-class)”`会破坏sortable-behaviour,因为选择器过于笼统,无法应用于后代DOM元素。我使用了'“&gt;:not(.any-class)”`来解决此问题,因为_items_的默认值为“”&gt; *“`。[Sortable Widget:项目](https://api.jqueryui.com/sortable/#option-items) (2认同)

owi*_*se1 22

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

$( ".sortable" ).sortable({
    items : 'li'
});
Run Code Online (Sandbox Code Playgroud)

要么...

$( ".sortable" ).sortable({
    items : ':not(.note)'
});
Run Code Online (Sandbox Code Playgroud)


Mla*_*vic 5

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

$( ".sortable" ).sortable({
     cancel: ".disable-sorting"
});
Run Code Online (Sandbox Code Playgroud)