Question

I’ve created a drag and drop game in order to start teaching myself jquery. Everything seems to be working but you can drop more than one item onto the same square. I want to disable droppable if the place holder has an image in it.

I’ve looked into:

`greedy: true`

That disables the drop but I’m not sure how to enable it again and also:

$(this).droppable( 'disable' );

I can get these both to disable the drop but not sure how I get them to enable it again if the block/image reverts back to its original position or is moved to another square.

Full version:
http://creativelabel.co.uk/drag-and-drop/

UPDATE:
This is the code for the droppable slots.

  for ( var i=0; i<=19; i++ ) {
  var images = 'images/slot' + slotNumbers[i] + '.jpg';
$('<div class="placeholder"><div class="img-slot"></div></div>').attr('id', 'slot'+slotNumbers[i]).data( 'slotNumbers', slotNumbers[i] ).appendTo( '#imgSlots' ).droppable( {
      accept: '#images img',
      hoverClass: 'hovered',
      drop: handleDropEvent,
      activate: handleDragEvent
});

This is drop: event code:

  function handleDropEvent( event, ui ) {
  var slotNumber = $(this).data( 'slotNumbers' );
  var imgNumber = ui.draggable.data( 'number' );
  ui.draggable.addClass( 'dropped' );
  $(this).droppable( 'disable' );
  ui.draggable.position( { of: $(this), my: 'right top', at: 'right top' } );

  if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    ui.draggable.data("valid", true);

    imgMatch++;
  }  else {
      if(ui.draggable.data("valid")) {
         imgMatch--;
         ui.draggable.data("valid", false); 
      }
  }

The activate: code:

  function handleDragEvent( event, ui ) {
   $(this).droppable( 'enable' );
   if(ui.draggable.data("valid")) {
         imgMatch--;
         $('input[name=Score]').val(imgMatch);
         $('#score h1').text(imgMatch);
         ui.draggable.data("valid", false); 
   }
 }

Answer 1

The docs(Look under “methods” tab) indicate that to disable you use:

$(this).droppable( 'disable' );

And to enable you use

$(this).droppable( 'enable' );

---

Update: Check this live example: http://jsfiddle.net/QqJRs/
Drag one of the red squares to the big box and drop it (it turns green to indicate its dropped). You cant drop any of the others to this box while one is inside.
Now drag that one out (It turns back red to indicate its removed). Now you can drop any of the others in its place.

The crux of this is as I described in my comment below; when you drop an item in a container associate the container with the item:

drop: function(event,ui){
    ui.draggable.addClass( 'dropped' ); // taken from your code & I used to change color

   ui.draggable.data('droppedin',$(this)); // associate the container
    $(this).droppable('disable'); // disable the droppable
}

Then when you drag it again, unassociate and re-enable:

drag: function(event,ui){
       if($(this).data('droppedin')){
           $(this).data('droppedin').droppable('enable'); v// re-enable
           $(this).data('droppedin',null);  // de-associate
           $(this).removeClass( 'dropped' ) // remove class
       }
   }