在「開始」處動態排除可排序項目

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'); 
     } 
    }); 
});