How do i limit the amount of LI in using jquery

Question

I'm using the Jquery UI to develop a drag and drop favourites UI, i want to limit the amount of LI's (limited to 5) dropped in a specific region, and replace current ones if a user drop one over the other. How can this be done? I'm currently using a modified version of the photomanager on the jquery ui site.

Answer 1

you can check how many LI's are in the region and from 5+ you replace the actual LI's. Lets see:

On Drop event:
   if($("#region li").length<5){
      //do your normal drop handling
   }else{
      //replace one of the actual li's with the dragged one
   }

is that helpful?

Answer 2

I recently did this in some kind of different way. Instead of preventing the area to be droppable, I would just pick up any surplus LI, and append it back to the pool of possibles by just appending back the last child

$('#pool').append($('#container li:last-child'));

See if this approach fits you ..