jQuery ui 可选择不工作答案

【问题标题】：jQuery ui selectable not workingjQuery ui 可选择不工作
【发布时间】：2015-04-16 23:50:30
【问题描述】：

<ol>
    <li>tafe</li>
    <li>college</li>
    <li>uni</li>
    <li>school</li>
</ol>

<script>
    $("ol").selectable();
</script>

我可以在元素周围制作一个框，但我无法单独或分组选择元素。

【问题讨论】：

你能发布你的完整 html 吗？

标签： jquery jquery-ui-selectable

【解决方案1】：

在我将相关库包含在 html 中之后，它对我有用：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

这是一个演示：https://jsfiddle.net/6cht0v0L/

jquery 代码：

 $(function() {
      $( "#selectable-1" ).selectable();
 });

这里是html：

 <ol id="selectable-1">
     <li class="ui-widget-content">Product 1</li>
     <li class="ui-widget-content">Product 2</li>
     <li class="ui-widget-content">Product 3</li>
     <li class="ui-widget-content">Product 4</li>
     <li class="ui-widget-content">Product 5</li>
     <li class="ui-widget-content">Product 6</li>
     <li class="ui-widget-content">Product 7</li>
  </ol>

【讨论】：

我已经在 HTML 中包含了这些库，但它仍然无法正常工作
你能分享你的整个 html @DSG
@DSG 我可以请您尝试与上面代码中完全相同的方法吗？

【解决方案2】：

我认为问题出在 CSS 上。我有同样的问题。我刚刚加入了ui-selected{background:gold;}，它起作用了。不要忘记包括所有这些：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

如果您的代码仍然无法正常工作，请使用检查元素查看确切的问题

【讨论】：

【解决方案3】：

您需要将调用包装在 jQuery onload 函数中

<script>
$(function() {
    $( "ol" ).selectable();
});
</script>

文档：https://jqueryui.com/selectable/

【讨论】：

我确实尝试结束通话，但仍然无法正常工作
你能发布完整的html吗？其他地方可能不正确