3

I have this code: https://jsfiddle.net/ks10hwj4/. It consists of a list

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

with each element being like

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

then I call the selectable function telling it to modify the active class of bootstrap when selected

$('.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');
    }
});

It works perfectly but it does not show the box when I select the files. I mean, I can't see the box the mouse is generating while clicking and moving around. What could be the problem?

ata
  • 3,398
  • 5
  • 20
  • 31
Davide Ceschia
  • 72
  • 6

1 Answers1

1

You seem to be missing the jQuery-ui css file. Try adding the css below.

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

UPDATE:

Changing the color of the selected box can be done by adding some css to your own css file. The '!important' overwrites the original color in the jQuery-ui.css.

.ui-selected {
    background: #00b448 !important;
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Wouter Bouwman
  • 1,003
  • 6
  • 13