jQuery ui 可排序：项目选项哈希选择在 DOM 元素更改后没有选择性

Question

我只想让没有 class "ui-state-disabled" 的 "li" 可以在您可以在 jsfiddle 上找到的代码中进行排序。

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

我还在 "ul" 中添加了事件侦听器，因此当用户双击任何 "li" 时，用户可以 disable/enable 可排序功能。我可以通过单击使已禁用的 "li" 再次可排序，但我无法通过将 class "ui-state-disabled" 添加回 "li".[=5 来重新禁用它=]

我还注意到 jQuery UI 库自动将 class "ui-sortable-handle" 添加到 "li" 可排序的，但重新启用（通过双clicking) "li"s 在没有 class "ui-sortable-handle".

的情况下仍然可以排序

Answer 1

缺少直接子选择器。

Codepen

详情

您只需要为列表本身添加一个 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"
});

jQuery ui 可排序：项目选项哈希选择在 DOM 元素更改后没有选择性

jQuery ui sortable: items option hash selection not being selective after changes in DOM element

javascript

jquery

jquery-ui

Codepen

详情

编辑

DEMO 2

DEMO