jQuery UI selectable 不显示选择大纲，为什么？答案

【问题标题】：jQuery UI selectable isnt displaying the selection outline, why?jQuery UI selectable 不显示选择大纲，为什么？
【发布时间】：2011-12-02 14:12:36
【问题描述】：

在 jQuery UI 可选演示页面上：http://jqueryui.com/demos/selectable/#default 选择元素时，可以看到选择框轮廓。我试了怎么没有出现？

这不是我的小提琴，但它也有同样的问题： http://jsfiddle.net/jMDVm/40/

【问题讨论】：

选择框轮廓是什么意思？在演示页面上，您选择一个项目，它以橙色突出显示。在小提琴中，您选择一个项目，它以灰色突出显示。缺少什么？
尝试在答案小提琴中选择项目并在问题小提琴中尝试，看到从您开始单击的点到鼠标当前所在的点有一个框轮廓

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

【解决方案1】：

这是因为它缺少 jQuery UI 样式表，其中包含用于设置选择帮助框样式的类。将以下内容添加到您的 CSS：

.ui-selectable-helper {
  position: absolute; 
  z-index: 100; 
  border: 1px dotted black; 
}

$(document).ready(function() {
  $("#selectable").selectable({
    selected: function(event, ui) {
      $('.status').text("Selected");
    },
    selecting: function(event, ui) {
      $('.status').text("Selecting");
    }
  });
});

#wrapper {
  width: 250px;
  height: 100px;
}

#selectable {
  background: black;
  width: 250px;
  height: 16px;
}

#selectable .ui-selecting {
  background: silver;
}

#selectable .ui-selected {
  background: gray;
}

#selectable div {
  background-color: #777;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div id="wrapper">
  <div id="selectable">
    <div>Hello</div>
    <div>Select</div>
    <div>Me</div>
  </div>
</div>
<div class="status"></div>

【讨论】：