javascript - 现在显示 JQuery 可选拖动鼠标框

Question

我有这个代码:https://jsfiddle.net/ks10hwj4/ . 它由一个列表组成

<ul class="files-list list-group items-list ui-selectable" style="min-height:200px;">

每个元素都像

<li class="file-item0 list-group-item list-group-item-action ui-widget-content ui-selectee ui-selected">
<div class="row ui-selectee active ui-selected">
    <div class="col-12 col-lg-9 vertical-align ui-selectee active ui-selected">
        a folder
    </div>
</div>

然后我调用 selectable 函数告诉它在选择时修改 Bootstrap 的事件类

$('.files-list').selectable({
    cancel: ".ui-splitselect-item .ui-splitselect-handle-drag",
    selecting: function (event, ui) {
        $(ui.selecting).addClass('active');
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).removeClass('active');
    },
    selected: function (event, ui) {
        $(ui.selected).addClass('active');
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('active');
    }
});

它工作得很好，但是当我选择文件时它不显示框。我的意思是，我看不到鼠标在单击和四处移动时生成的框。可能是什么问题？

Answer 1

您似乎缺少 jQuery-ui css 文件。尝试在下面添加 css。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

更新:

可以通过在您自己的 css 文件中添加一些 css 来更改所选框的颜色。 '!important' 会覆盖 jQuery-ui.css 中的原始颜色。

.ui-selected {
    background: #00b448 !important;
}