Take the 2-minute tour ×

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.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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
      //replace one of the actual li's with the dragged one

is that helpful?

share|improve this answer
Thanks but it didn't work really, here is my code if($("#favourites li").length<5){ $favourites.droppable({ accept: '#icon-gallery ul > li', drop: function(ev, ui) { deleteImage(ui.draggable); } }); }else{ $favourites.droppable({deactivate: '#icon-gallery ul > li',}); } –  ivordesign May 15 '09 at 14:34
I realized I was applying the if statement to the drag event and not the drop event –  ivordesign May 21 '09 at 8:12
glad it helped you :) –  SinneR May 21 '09 at 15:05
add comment

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 ..

share|improve this answer
add comment

Your Answer


