Desactivar drop si div ya ha sido dropeado?

He creado un juego de arrastrar y soltar para comenzar a enseñarme jQuery. Todo parece estar funcionando, pero puedes dejar caer más de un objeto en el mismo cuadrado. Quiero deshabilitar el droppable si el marcador de posición tiene una imagen en él.

He investigado:

`greedy: true` 

Eso desactiva la caída, pero no estoy seguro de cómo habilitarla de nuevo y también:

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

Puedo obtener estos dos para deshabilitar la caída, pero no estoy seguro de cómo puedo habilitarlos nuevamente si el bloque / imagen vuelve a su posición original o si se mueve a otra casilla.

Versión completa: http://creativelabel.co.uk/drag-and-drop/

ACTUALIZACIÓN: Este es el código para las ranuras que se pueden soltar.

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

Esto es drop: código de evento:

  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); } } 

El activate: código:

  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); } } 

Los documentos (Busque en la pestaña “métodos”) indican que para deshabilitar el uso de:

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

Y para permitirte usar

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

Actualización: verifique este ejemplo en vivo: http://jsfiddle.net/QqJRs/ Arrastre uno de los cuadrados rojos al cuadro grande y suéltelo (se vuelve verde para indicar que se ha caído). No puedes dejar caer ninguno de los otros en esta caja mientras que uno está dentro. Ahora arrastre ese uno hacia afuera (se vuelve rojo para indicar que se eliminó). Ahora puedes soltar a cualquiera de los otros en su lugar.

El quid de esto es como lo describí en mi comentario a continuación; cuando suelte un elemento en un contenedor, asocie el contenedor con el elemento:

 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 } 

Luego, cuando lo arrastre de nuevo, desasocie y vuelva a habilitar:

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