更新動態排序的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似乎並不「通知」指出，改變，所以第三項保持排序。

如何讓items選項連敷在.active類添加到一個不同的項目，使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