Kann die .Droppable-Funktionalität nicht entfernen

Question

Ich habe eine Reihe von DIVs, die ich benutze, um einem Benutzer zu ermöglichen, andere DIVs zu löschen. Dies wird ein "Fill in the Blank" sein. Da das Dropable das Leerzeichen im Satz und das Droppable die Antworten sind, aus denen sie auswählen können.

Das Problem, das ich zur Zeit habe, ist, wenn sie ihre Antwort div auf das dropable div, meine Funktion entfernt die ziehbare aus dem ziehbaren Element, aber das dropable Element bleibt in der Lage, mehr divs auf sie fallen lassen.

Ich frage mich, wie kann ich dies zu deaktivieren, die Droppable Div, so dass, sobald eine "Antwort" auf sie fallen gelassen wird, ist das einzige, was sein kann.

Hier ist, was meine Funktion wie zur Zeit aussieht:

function handleCardDropOne(event, ui) { 
    var cardValue = ui.draggable.attr('id'); 

    ui.draggable('disable'); 
    $(this).droppable('disable'); 
    ui.draggable.position({ of: $(this), 
    my: 'left top', 
    at: 'left top'}); 
    ui.draggable.draggable('option', 'revert', false); 
}; 

Answer 1

$(function() { 
 
    //Drag 1 
 
    $("#draggable") 
 
    .draggable({ snap: "#snap-one", snapMode: "inner", snapTolerance: 5 }); 
 
    //Drag 2 
 
    $("#draggable2") 
 
    .draggable({ snap: "#snap-two", snapMode: "inner", snapTolerance: 5 }); 
 
    //Drop 1 
 
    $("#snap-one").droppable({ 
 
     accept: "#draggable", 
 
     drop: function(event, ui) { 
 
     var top = $('#draggable').css('top') 
 
     ,left = $('#draggable').css('left'); 
 
      if (top === '-107px'){ 
 
       if(left === '0px'){ 
 
        $(ui.draggable).draggable('disable'); 
 
        if ($('#draggable').hasClass('ui-draggable-disabled')){ 
 
        alert('hello'); 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }); 
 
    //Drop 2 
 
    $("#snap-two").droppable({ 
 
     accept: "#draggable2", 
 
     drop: function(event, ui) { 
 
     var top = $('#draggable2').css('top') 
 
     ,left = $('#draggable2').css('left'); 
 
      if (top === '-107px'){ 
 
       if(left === '0px'){ 
 
        $(ui.draggable).draggable('disable'); 
 

 
       } 
 
      } 
 
     } 
 
    }); 
 

 
});

.draggable { 
 
    width: 80px; 
 
    height: 80px; 
 
    float: left; 
 
    margin: 0 10px 10px 0; 
 
    font-size: .9em; 
 
} 
 

 
.snap { 
 
    width: 80px; 
 
    height: 80px; 
 
    margin: 0 10px 25px 0; 
 
    float:left; 
 
} 
 
.ui-state-highlight{ 
 
    background-color:yellow; 
 
    color:#000; 
 
    
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="snap-one" class="snap ui-widget-header" style="background: #ffc36a;">AAA</div> 
 
<div id="snap-two" class="snap ui-widget-header" style="background: #ffc36a;">BBB</div> 
 

 
<div class="demo"> 
 
    <br clear="both" /> 
 
    
 
    <div id="draggable" class="draggable ui-widget-content" style="background: #a7fbdf;"> 
 
     <p>AAA</p> 
 
    </div> 
 
    <div id="draggable2" class="draggable ui-widget-content" style="background: #a7fbdf;"> 
 
     <p>BBB</p> 
 
    </div> 
 
</div>