僅在可放置div中沒有​​子項的情況下才如何拖放？

Question

好的，我還無法解決這個問題。 我發現此答案有助於在可放置的插槽中已有可拖動元素的情況下拒絕放置，但我無法使該插槽清空后立即重新開始接受子代。 而且，它對於可拖動的片段的初始狀態不起作用（請注意，如果它是其子元素的初始狀態，則可以在插槽中堆疊多個片段）。

這是項目的鏈接

這是特定的代碼段：

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

要重新激活可放置的對象，您只需在draggable開始處修改option即可。 這將導致還原問題，因此，您還應該移動可draggable的droppable在停止事件上禁用。 像這樣：

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