無法刪除.droppable功能

我有一堆DIV，我正在使用它來允許用戶刪除其他DIV。這將是一個「填補空白」的東西。這句話是句中的空白，而句中的句子則是他們可以選擇的答案。無法刪除.droppable功能

我現在遇到的問題是當他們將答案div放到droppable div中時，我的函數將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); 
};

來源

2017-06-23 Conor606

您可以創建一個小提琴複製您的問題更快解決 –

使用可投放窗口小部件的「下拉」事件。 '$（「＃可放開」）可放開。（{下降：函數（）{$（本）.droppable（「選項」，「已禁用」，真）}}）;'http://api.jqueryui.com/ droppable /＃選項禁用http://api.jqueryui.com/droppable/#event-drop – TCHdvlp

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

來源

2017-06-23 10:40:58

無法刪除.droppable功能

回答

相關問題