html - 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 until Item 2 while I need only the element on which focus is, not it's parent until mouse focus on that.

Please keep in mind that there might be any pure html just not limited to ul, li, it is for illustrative purpose only.

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2

    <ul >
      <li>Item 11
        <ul >
          <li>Item 111</li>
          <li>Item 112</li>
          <li>Item 113</li>
          <li>Item 114

            <ul >
              <li>Item 1111</li>
              <li>Item 1112</li>
              <li>Item 1113</li>
              <li>Item 1114</li>
              <li>Item 1115</li>
            </ul>  

          </li>
          <li>Item 115</li>
        </ul>  

      </li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>  
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Script Is

$( "#selectable" ).selectable();

Fiddle Is :- http://jsfiddle.net/z425phwn/2/

I have gone through already asked question but not able to find any solution for this issue, Any help will be very useful!

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