如何在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');