如何在droppable div中沒有​​孩子時只拖放？

Question

好的，我一直無法解決這個問題。 I found this answer如果可拖放插槽中已經有可拖動的元素，它可以幫助拒絕丟棄，但是我一直沒有能夠讓該插槽重新開始接收孩子，一旦它被清空。此外，它不適用於可拖動片段的初始狀態（注意，如果它是其子項的初始狀態，則可以在一個插槽中堆疊多個片段）。

Here is the link to the project

這裏是特定的一段代碼：

jQuery(window).on("load",function() //if document has loaded 
{ 
//Code to be executed when the document loads here 
$(".b-piece").draggable({ cursor: "move", revert: "invalid"}); 
$(".grid-b .grid-slot").droppable({ 
    accept: ".b-piece", 
    drop: function(event, ui) { 
    $(this).droppable('option', 'accept', 'none'); /* STOP ACCEPTING OBJECTS */ 
    $(this).append(ui.draggable); /* MOVE DRAG OBJECT TO NEW PARENT */ 
    $(this).children(".game-piece").css({"top":"0", "left":"0"}); /* MAKE GAME PIECE SNAP INTO PLACE */ 
    }, 
    out: function(event, ui){ 
    accept: ".b-piece" 
    } 
    }); 

}); 

謝謝！

Answer 1

要重新激活droppble，您可以簡單地修改draggable開始處的option。這會導致回覆出現問題，因此您還應該在draggable的停止事件中移動停用停用事件。就像這樣：

$(".b-piece").draggable({ 
    cursor: "move", 
    revert: "invalid" 
    start: function(e, ui){ 
     ui.helper.parent().droppable('option','accept','.b-piece'); 
    }, 
    stop: function(e, ui){ 
     ui.helper.parent().droppable('option','accept','none'); 
    }  
}); 

至於初始狀態，設置droppable後運行它，它應該做的伎倆：

$(".grid-b:not(:empty) .grid-slot:not(:empty)").droppable('option', 'accept', 'none');