jQuery ui sortable：項目選項哈希選擇在DOM元素更改後不可選擇

Question

我只想讓沒有「ui-state-disabled」類的「li」在您可以在jsfiddle上找到的代碼中排序。

$("#sortable-1, #sortable-2").sortable({ 
    items: "li:not(.ui-state-disabled)", 
    connectWith: ".connect" 
}); 

我還增加事件偵聽器向「UL」 S，所以當在任何「裏」，用戶可以禁用/用戶雙擊啓用排序功能。我可以讓一個禁用的「li」通過點擊來重新排序，但是我不能通過將「ui-state-disabled」類添加回到「li」來重新禁用它。

我也注意到jQuery UI庫自動將類「ui-sortable-handle」添加到可排序的「li」中，但重新啓用（通過雙擊）「li」仍然可以排序而不需要class「ui -sortable手柄」。

Answer 1

缺少直接子選擇器。

Codepen

詳細

你只需要在tabIndex屬性添加到LIS自己。

HTML

<div> 
    <ul id="sortable-1" class="connect"> 
     <li tabindex="0">Enabled</li> 
     <li tabindex="0" >Enabled</li> 
     <li tabindex="0">Enabled</li> 
    </ul> 
</div> 
<div> 
    <ul id="sortable-2" class="connect"> 
     <li tabindex="0">Enabled</li> 
     <li class="ui-state-disabled" tabindex="0">Disabled</li> 
     <li class="ui-state-disabled" tabindex="0">Disabled</li> 
    </ul> 
</div> 

編輯

DEMO 2

這很簡單，你想要做的一切。

$(function() { 
    $("#sortable-1, #sortable-2").sortable({ 
     items: "li:not(.ui-state-disabled)", 
     cancel: ".ui-state-disabled", 
     connectWith: ".connect" 
    }); 

    $("ul").on("dblclick", "li", function (event) { 
     var $el = $(this); 
     if ($el.text() == "Enabled") { 
      $el.text("Disabled"); 
     } else { 
      $el.text("Enabled"); 
     } 
     $el.toggleClass("ui-state-disabled"); 
    }) 
}) 

DEMO

$("#sortable-1, #sortable-2").sortable({ 
    items: "> li:not(.ui-state-disabled)", 
    connectWith: ".connect" 
});