Propagation Issue In Nested Jquery Ui Selectable

Question

Problem is: In nested jQuery Ui selectable, selecting top most child of context means when I click on Item 1 it select Item 1, but when I click on Item 111 or 1111 it select

Answer 1

I suppose jQuery UI Selectable is not designed for such behaviour. But you still can do it manually:

$(document).ready(function()
{
    $("*").click(function()
    {
        $(".ui-selected").removeClass("ui-selected");
        var thisEl = $(this);
        if (thisEl.closest("#selectable").length)
        {
            thisEl.addClass("ui-selected");
        }
        return false;
    });
});

Updated fiddle.

Also to emulate jQuery UI Selectable (and to use its styles) you can add something like:

$(document).ready(function()
{
    var selectable = $("#selectable");
    selectable.addClass("ui-selectable");
    selectable.find("*").addClass("ui-selectee");
});