[英]How to drag and drop ONLY if there is no child in droppable div?
Ok, I haven't been able to work out the solution to this. 好的,我还无法解决这个问题。 I found this answer that helps reject drops if there is already a draggable element in the droppable slot, but I haven't been able to make that slot restart accepting children once it has been emptied.
我发现此答案有助于在可放置的插槽中已有可拖动元素的情况下拒绝放置,但我无法使该插槽清空后立即重新开始接受子代。 Also, it doesn't work for the initial state of the draggable pieces (notice you can stack more than one piece in a slot if it is the initial state of its child).
而且,它对于可拖动的片段的初始状态不起作用(请注意,如果它是其子元素的初始状态,则可以在插槽中堆叠多个片段)。
Here is the link to the project 这是项目的链接
And here is the specific piece of code: 这是特定的代码段:
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"
}
});
});
Thanks! 谢谢!
To reactivate droppable, you can simply modify the option
on draggable
start. 要重新激活可放置的对象,您只需在
draggable
开始处修改option
即可。 This will cause a problem with revert, so you should also move the droppable disabling on stop event of draggable
. 这将导致还原问题,因此,您还应该移动可
draggable
的droppable在停止事件上禁用。 Like this: 像这样:
$( ".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');
}
});
As for initial state, run this after setting the droppable
, it should do the trick: 至于初始状态,请在设置
droppable
之后运行此命令,它应该可以解决问题:
$( ".grid-b:not(:empty) .grid-slot:not(:empty)" ).droppable('option', 'accept', 'none');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.