Проблема распространения в Nested Jquery Ui по выбору

Question

Проблема в том, что во вложенном jQuery Ui по выбору выбор самого верхнего дочернего контекста означает, что когда я нажимаю на элемент 1, он выбирает элемент 1, но когда я нажимаю на элемент 111 или 1111, он выбирается до элемента 2, а мне нужен только элемент, на котором фокусируется это не родитель, пока мышь не сфокусируется на этом.

Пожалуйста, имейте в виду, что может быть любой чистый html, не ограничивающийся только ul, li, это только для иллюстрации.

<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>

Скрипт

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

Скрипка - это: - http://jsfiddle.net/z425phwn/2/

Я прошел через уже заданный вопрос, но не смог найти решения этой проблемы, любая помощь будет очень полезна!

Answer 1

Я полагаю, что jQuery UI Selectable не предназначен для такого поведения. Но вы все равно можете сделать это вручную:

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

Обновленная скрипка.

Также, чтобы эмулировать jQuery UI Selectable (и использовать его стили), вы можете добавить что-то вроде:

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

Answer 2

Использовать 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.

Например, distance: 10 (10 пикселей), элемент ниже будет иметь шанс получить клик.