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

Question

I only want to make "li"s without class "ui-state-disabled" to be sortable in the code you can find on jsfiddle .

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

I also added event listeners to the "ul"s so when the user double clicks on any "li", the user can disable/enable the sortable feature. I can make a disabled "li" to be sortable again by clicking on it, but I cannot re-disable it by adding class "ui-state-disabled" back to the "li".

I also noticed jQuery UI library automatically adds class "ui-sortable-handle" to "li"s that are sortable, but the re-enabled (by double clicking) "li"s are still sortable without class "ui-sortable-handle".

Answer 1

missing the direct child selector.

Codepen

detail

You just need to add a tabindex attribute to the lis themselves.

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>

edit

DEMO 2

this is simple and does everything you want.

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