jQuery ui sortable：DOM元素更改后，項目選項哈希選擇不具有選擇性

Question

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

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

我還向“ ul”添加了事件偵聽器，因此，當用戶雙擊任何“ li”時，用戶可以禁用/啟用可排序功能。 我可以通過單擊禁用的“ li”使它再次可排序，但不能通過將“ ui-state-disabled”類添加回“ li”來重新禁用它。

我還注意到jQuery UI庫會自動將類“ ui-sortable-handle”添加到可排序的“ li”中，但是重新啟用（通過雙擊）的“ li”仍然可以在沒有類“ ui-sortable-handle”的情況下進行排序”。

Answer 1

缺少直接子選擇器。

Codepen

詳情

您只需要向lis本身添加一個tabindex屬性。

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>

編輯

演示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"
});