javascriptjquerycssjquery-uijquery-ui-selectable

Jquery-ui selectable on position absolute div

I'm using the JQuery-UI Selectable plugin: https://jqueryui.com/selectable/ and I want to select some items inside a sub-menu.

A minimal example:

$(".selectable").selectable();
.parent {
  background-color: gray;
  width: 300px;
}

.child {
  display: none;
  position: absolute;
  background-color: #bababa;
}

.parent:hover .child {
  display: block !important;
}

.selectable li {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background-color: lightgrey;
  border: 1px solid gray;
}

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

.selectable .ui-selected {
  background: #F39814;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="parent">
  hover me
  <div class="child">
    select this:
    <ol class="selectable" style="list-style: none;padding: 0;">
      <li class="">1</li>
      <li class="">2</li>
      <li class="">3</li>
      <li class="">4</li>
      <li class="">5</li>
    </ol>
  </div>
</div>

The problem: When the selection starts, the parent element loses the hover state, so the sub-menu get closed. If you drag the pointer and select the elements, this elements get selected (even if the sub-menu is closed), But I need the menu not to lose the hover state (I just need to keep it visible).

Solution

  • Adding a helper class while selectable is selecting should help

    $(".selectable").selectable({
  start: e => {
    $('.parent').addClass('open')
  },
  stop: e => {
   setTimeout(() => {
    $('.parent').removeClass('open')
   })
  }
});

    Of course, you'll also need to set .open .child {display: block} in CSS.

    See it working:

    $(".selectable").selectable({
  start: e => {
    $('.parent').addClass('open')
  },
  stop: function(e) {
   setTimeout(() => {
    $('.parent').removeClass('open')
   })
  }
});
    .parent {
  background-color: gray;
  width: 300px;
}

.child {
  display: none;
  position: absolute;
  background-color: #bababa;
}

.parent:hover .child, .open .child {
  display: block !important;
}

.selectable li {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background-color: lightgrey;
  border: 1px solid gray;
}

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

.selectable .ui-selected {
  background: #F39814;
  color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="parent">
  hover me
  <div class="child">
    select this:
    <ol class="selectable" style="list-style: none;padding: 0;">
      <li class="">1</li>
      <li class="">2</li>
      <li class="">3</li>
      <li class="">4</li>
      <li class="">5</li>
    </ol>
  </div>
</div>