Limit jQuery sortable list

Question

Hi all,

I'm working on a project where I need to schedule persons in rooms. I'm using jQuery sortables to achieve this task. The only 'problem' is that there is a maximum capacity for a room. E.g. some rooms can have max. 3 persons, others 4 and some maybe only 1. So after browsing the jQuery documentation I came up with this.. only, it's not doing anything. The part between onStart: function(){} is created dynamicly by PHP.

Do you guys have some experience in setting up a max no. of items in a sortable list and check for that?

$(function() {
 $(".sortable, .connectable").sortable({
  connectWith: '.sortable, .connectable',
  helper: 'clone',
  cursor: 'move',
  onStart: function()
  {

   if($(".room-1-1").sortable('items') == 2)
   {
    alert("Maximum reached..");
   }


   if($(".room-1-2").sortable('items') == 2)
   {
    alert("Maximum reached..");
   }

      }
 }).disableSelection();
});

Answer 1

It seems to me you are just missing one piece, in Firebug, try:

$(".room-1-1").sortable('items')

You will most likely not see a number of items, but rather a collection of elements. So then, what you want is:

if( $(".room-1-1").sortable('items').length == 2 ) { ... }

Answer 2

First, the event you want to hook on is not onStart, but simply start, according to the doc.

Then, as thenducks said, I don't think your way of counting the elements is right. You can do it whithout using sortable for counting :

if($(".room-1-1 items").length == 2)
{
    alert("Maximum reached..");
}

where items is the selector on the types of elements in your lists (may be divs, lis, a CSS class, etc..).

Answer 3

Easily solved it by craeting a javascript function which checks the number of LI elements in a specified DOM element.