CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-selectable
IARI
IARI

Reputation: 1377

JQuery UI Selectable - delay the lasso (selection rectangle)

  1. When you just click on a selected element holding ctrl, it will be deselected.
  2. Elements "caught" with a lasso (selection rectangle) however, while holding ctrl, are added to the selection. (instead of a XOR mode one might expect)

Now if you desire 1. to happen, but accidentally move the mouse a little, a lasso will be created and 2. happens - net effect: nothing. This is irritating, especially when the selectable elements are rather big and the gui isn't perfectly responsive.

I can imagine two approaches to avoid this, namely

I'm open to any approach (also new ones), as long as it comes with an implementation.

Upvotes: 1

Views: 869

Answers (1)

T J
T J

Reputation: 43156

You can use the delay and distance options of selectables to avoid triggering selection by unwanted small mouse movements.

Delay:

Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element.

Distance:

Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.

For example:

$("#selectable").selectable({
  delay: 30,
  distance: 30
});
#selectable {
  list-style: none;
}
#selectable li {
  width: 100px;
  height: 30px;
}
#selectable .ui-selectee {
  background: #ccc;
}
#selectable .ui-selecting {
  background: dodgerblue;
}
#selectable .ui-selected {
  background: royalblue;
}
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Upvotes: 3

Related Questions