Désactiver drop si div a déjà été supprimé?

Question

J'ai créé un jeu de glisser-déposer pour commencer à m'enseigner jquery. Tout semble fonctionner mais vous pouvez déposer plus d'un objet sur le même carré. Je veux désactiver droppable si l'espace réservé contient une image.

J'ai regardé dans:

`greedy: true` 

qui désactive la chute mais je ne suis pas sûr comment l'activer à nouveau et aussi:

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

Je peux obtenir ces deux pour désactiver la Laisser tomber, mais je ne sais pas comment je les obtenir pour l'activer à nouveau si le bloc/image revient à sa position d'origine ou est déplacé vers un autre carré.

Version complète: http://creativelabel.co.uk/drag-and-drop/

MISE À JOUR: Voici le code pour les machines à sous largables.

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

C'est drop: code d'événement:

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

Le code activate::

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

Le docs (Regardez sous l'onglet "méthodes") indiquent que pour vous désactiver l'utilisation:

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

Et pour vous permettre d'utiliser

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

---

Mise à jour: Vérifiez cet exemple en direct: http://jsfiddle.net/QqJRs/ Faites glisser l'un des carrés rouges à la grande boîte et déposez-le (il devient vert pour indiquer son chuté). Vous ne pouvez pas laisser tomber les autres dans cette case pendant que vous êtes à l'intérieur. Maintenant faites glisser celui-là (il revient en rouge pour indiquer son enlevé). Maintenant vous pouvez laisser tomber n'importe lequel des autres à sa place. Le point crucial de ceci est comme je l'ai décrit dans mon commentaire ci-dessous; lorsque vous déposez un élément dans un conteneur associer le conteneur à l'article:

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 
} 

Puis, quand vous le faites glisser à nouveau, unassociate et réactivez:

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