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.

Answer 1

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/