jQuery ui sortable：在DOM元素更改后，items选项哈希选择不具有选择性

Question

我只想让＃34; li＆＃34; s没有上课＆＃34; ui-state-disabled＆＃34;可以在jsfiddle上找到的代码中进行排序。

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

我还在＆＃34; ul＆＃34; s中添加了事件监听器，因此当用户双击任何＆＃34; li＆＃34;时，用户可以禁用/启用可排序功能。我可以让一个残疾人＆＃34; li＆＃34;通过点击它可以再次排序，但我不能通过添加类＆＃34; ui-state-disabled＆＃34;来重新禁用它。回到＆＃34; li＆＃34;。

我还注意到jQuery UI库会自动添加类＆＃34; ui-sortable-handle＆＃34; to＆＃34; li＆＃34; s是可排序的，但重新启用（通过双击）＆＃34; li＆＃34; s仍然可以排序，没有类＆＃34; ui-sortable-handle＆＃34;

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>

修改

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