嵌套 Jquery Ui 可选中的传播问题答案

【问题标题】：Propagation Issue In Nested Jquery Ui Selectable嵌套 Jquery Ui 可选中的传播问题
【发布时间】：2014-10-14 16:04:09
【问题描述】：

问题是：在嵌套的 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/

我已经完成了已经提出的问题，但无法找到任何解决此问题的方法，任何帮助都会非常有用！

【问题讨论】：

标签： jquery html jquery-ui jquery-ui-selectable

【解决方案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;
    });
});

Updated fiddle.

还可以模拟 jQuery UI Selectable（并使用其样式），您可以添加如下内容：

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

【讨论】：

非常感谢您的帮助！但它不适用于鼠标拖动！
@developerCK你的意思是当你用鼠标选择区域时选择相关元素？
是的！ AS 可选择提供，只需单击鼠标左键拖动鼠标即可。这实际上是个问题。
@developerCK 好吧，也可以手动制作，尽管实现起来并不容易。您还可以尝试修复库中所需元素的选择（jQuery UI Selectable）并使用修改后的库。

【解决方案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 像素），下面的元素将有公平的机会获得点击。

【讨论】：