2

So okay. Let's say i have the following snippet:

<div id="container">
    <div class="content" >A</div>
    <div class="content" >B</div>
    <div class="content" >C</div>
    <div class="content" >D</div>
    <div class="content" >E</div>
    <div class="content" >F</div>
</div>

Now, let's say I have performed:

$('.content').selectable( {} );

My dilemma:

Say, any time I am dragging and thus the lasso tool appears, I only want 4 divs to be selected - I can still extend the lasso after I have selected 4 but the succeeding divs that the lasso hovers over should not be selected. So say the looks of the divs is from left to right,

A B C D E F

The lasso starts at A and I move it to right - upon covering D so it met the limit of 4 - when I hover over E and F, these shouldn't be selectable now.

abrahamdsl
  • 21
  • 4

1 Answers1

4

Bind to the selecting event and cancel it if there are already 4 selected items.

$( "#selectable" ).selectable({
   selecting: function(event, ui) { 
     if ($(".ui-selected, .ui-selecting").length > 4) {
       $('.ui-selecting').removeClass("ui-selecting");
     }
   }
});

Edit: Corrected code snippet, as I was just taking a stab from iPad. Here's a working jsfiddle of what you want as well: http://jsfiddle.net/fordlover49/MRphL/

Gary Green
  • 22,045
  • 6
  • 49
  • 75
PriorityMark
  • 3,247
  • 16
  • 22
  • I've tried it already and it does not work. Alternatively, for now I am using `$(this).mouseup();` instead of `return false;`, but however, say, the lasso strayed on some two more divs, after the `.mouseup()` was called, such two more divs were left with class `ui-selecting` – abrahamdsl Jan 30 '12 at 04:18
  • Updated answer for you, as opposed to returning false, just remove the ui-selecting class from the items that are getting selected in the selecting event. – PriorityMark Jan 30 '12 at 19:08
  • If you do `$(ui.selecting).siblings(".ui-selected, .ui-selecting")` you can have multiple sets of selectable elements with separate limits. – chad May 07 '14 at 06:09
  • Also if you do `$('.ui-selecting:not(:first)').removeClass('ui-selecting');` you'll get rid of the crappy cancelling selection instantly when dragging. – Gary Green Aug 05 '16 at 13:36