更新动态排序的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