How do I limit selectable elements using JQuery UI selectable?

Question

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.

Gary Green · Accepted Answer · 2016-08-05 13:31:25Z

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/

edited Aug 5, 2016 at 13:31

Gary Green

22.4k6 gold badges52 silver badges76 bronze badges

answered Jan 30, 2012 at 3:02

PriorityMark

3,24719 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abrahamdsl Over a year ago

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

PriorityMark Over a year ago

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.

chad Over a year ago

If you do $(ui.selecting).siblings(".ui-selected, .ui-selecting") you can have multiple sets of selectable elements with separate limits.

Gary Green Over a year ago

Also if you do $('.ui-selecting:not(:first)').removeClass('ui-selecting'); you'll get rid of the crappy cancelling selection instantly when dragging.

Collectives™ on Stack Overflow

How do I limit selectable elements using JQuery UI selectable?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related