Question

我有一堆DIV，我正在使用它来允许用户放弃其他DIV。这将是一个“填补空白”的事情。由于droppable是句子中的空白而droppable是他们可以选择的答案。

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

我想知道如何才能通过这个来禁用droppable 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

＆＃13;

$(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');

                }
            }
      }
    });

});

＆＃13;

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

＆＃13;

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

＆＃13;

无法删除.droppable功能

1 个答案: