好吧,我还没有找到解决方案。 I found this answer如果可放置插槽中已经有可拖动元素,这有助于拒绝放置,但我无法使该插槽在清空后重新开始接受子元素。此外,它不适用于可拖动 block 的初始状态(请注意,如果它是其子项的初始状态,您可以在插槽中堆叠多个 block )。
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"
}
});
});
谢谢!
最佳答案
要重新激活 droppable,您只需修改 draggable
启动时的选项
即可。这会导致恢复问题,因此您还应该移动 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');
关于javascript - 仅当可放置 div 中没有子项时如何拖放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31352092/