.droppable機能を削除できません

Question

私は、他のDIVを削除できるように私が使用しているDIVの束を持っています。これは、 "空白を埋める"のようなものになります。排泄物は文の中の空白であり、排泄物は選択できる答えである。

私は今分かっている問題は、回答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>