仅当可放置 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

要重新激活 droppable，您只需修改 option on draggable start。这将导致还原问题，因此您还应该移动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');