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似乎没有“注意到”这种变化，所以第三项仍然是可排序的。

即使将items类添加到其他项目中，如何.active类也适用，以便sortable按照我的要求处理它？</ p>

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

更新动态可排序的jQuery UI

1 个答案: