无法删除.droppable功能

Question

我有一堆DIV，我用来允许用户将其他DIV放到上面。这将是一种“填空”的东西。可丢弃的是句子中的空白处，可丢弃的是他们可以选择的答案。

我现在遇到的问题是，当他们把他们的答案div放到droppable div上时，我的函数会从draggable元素中删除draggable，但是droppable元素仍然可以有更多的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>

​