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

Answer 2

Use the distance option.

The distance means tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.

With e.g. distance: 10 (10 pixels), the element below will have a fair chance to receive the click.