无法删除 .droppable 功能

Question

我有一堆 DIV 用于允许用户将其他 DIV 放到上面。这将是“填空”之类的事情。 droppable 是句子中的空白，而 droppable 是他们可以选择的答案。

我现在遇到的问题是，当他们将答案 div 放到可放置的 div 上时，我的函数从可拖动元素中删除了可拖动元素，但可放置元素仍然能够将更多的 div 放置到它上面。

我想知道我怎样才能让它禁用可放置的 div，这样一旦“答案”被放到它上面就是唯一可以做的事情。

这是我的函数目前的样子：

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>