更新可动态排序的 jQuery UI

Question

我在无序列表上使用jQuery UI sortable。我希望每个列表项都是可排序的除了，对于具有.active 类的列表项：

<ul>
    <li class="active">Item 1</li> <!-- This item should NOT be sortable -->
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

所以我已经像这样初始化了sortable：

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

问题在于单击列表项会将.active 类移动到该项。例如，如果我点击第三项，我会得到：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="active">Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

但sortable 似乎没有“注意到”这种变化，因此第三项仍然可以排序。

即使.active 类被添加到不同的项目，我如何使items 选项适用，以便sortable 按我想要的方式处理它？

Answer 1

您应该在start event 中动态检查这一点。

如果目标元素有active类，cancel the action：

$('#list').sortable({
    items: 'li',
    start: function(e, ui){
        if ( ui.item.hasClass('active') ) {
        // "return false" does not work - the widget does not seem to consider
        //  that it should cancel the whole dragging, and enters a broken state.
        //
        // When this callback is executed, the "start" event is not
        // fully handled yet.
        // You have to wait for its end, then cancel the action :
            setTimeout(function(){
                $('#list').sortable('cancel');
            }, 0);
        }
    }
});

fiddle - jQuery 1.8.3, jQuery-ui 1.9.2