在“开始”时动态排除可排序项目

Question

我希望能够根据被拖动的特定项目“冻结”可排序列表中的某些项目。所以基本上是这样的：

<ul class="sortable">
   <li class="special">Item 1</li>
   <li>Item 2</li>
   <li class="lock-me">Item 3</li>
</ul>

js

$( ".sortable" ).sortable({
    start : function(e, ui){
        if(ui.item.hasClass('special')){
            $( ".sortable" ).sortable('option', 'items', ':not(.lock-me)');
        }
    },
    stop : function(e, ui){
        $( ".sortable" ).sortable('option', 'items', 'li');
    }
});

这可能吗？或者也许还有其他方法可以解决这个问题？

这是JSFiddle

Answer 1

您没有正确使用items 选项：

http://jsfiddle.net/4uxXY/

$(function() {
    $( ".sortable" ).sortable({
        items: ':not(.lock-me)'
    });
 });

阅读您的评论。我误会了。

添加$( ".sortable" ).sortable( "refresh" ); 为我解决了这个问题。

这里有两个选项：

http://jsfiddle.net/epLYY/

$(function () {
    $(".sortable").sortable({
        items: ':not(.lock-now)',
        start: function (e, ui) {
            console.log('started');
            if (ui.item.hasClass('special')) {
                console.log('item was .special');
                $('.sortable .lock-me').addClass('lock-now');
                $( ".sortable" ).sortable( "refresh" );
            }
        },
        stop: function (e, ui) {
            console.log('stopping');
            $('.sortable .lock-me').removeClass('lock-now');
        }
    });
});

http://jsfiddle.net/4G67x/

$(function() {
    $( ".sortable" ).sortable({
        start : function(e, ui){
            if(ui.item.hasClass('special')){
                $( ".sortable" ).sortable('option', 'items', ':not(.lock-me)').sortable( "refresh" );
            }
        },
        stop : function(e, ui){
            $( ".sortable" ).sortable('option', 'items', 'li');
        }
    });
 });