在ui draggables(
http://jqueryui.com/demos/droppable/#revert)是否可以还原一个div,如果它在一个div内,如果不在另一个？例如这样
$( "#draggable" ).draggable({ revert: "valid",revert:"invalid" });
但是由于明显的原因,这不行.我可以说这个吗？
解决方法
你的想法是正确的,你必须使小盒子贪婪的droppables和处理他们的drop事件.棘手的部分是取消拖动操作.
默认情况下,您的拖动应该以恢复为开始：’invalid’.如果将它们拖入大盒子中,则不需要做任何事情,在我的例子中,我们使用宽容：“适合”,所以小盒子必须完全被内部接受.
我把这个小盒子的贪婪的容器放在容易的地方：’touch’,所以如果拖动的小盒子碰到另一个小盒子,它就会调用它的拖动处理程序.
要从拖动处理程序中取消拖动操作,您可以设置拖动项目的方法来恢复：true,即使将其放在接受的droppable上也会强制恢复.要确保您可以再次拖动该小盒子,在其拖动停止事件中,您必须重置恢复：“无效”.停止事件将在每次成功的下降时触发,如果恢复,则恢复完成后将触发.
你可以在这里尝试一个现场演示：http://jsfiddle.net/htWV3/1/
HTML：
<div class="drop">
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
</div>
CSS：
.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }
.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }
使用Javascript：
$('.drop').droppable({
tolerance: 'fit'
});
$('.drag').draggable({
revert: 'invalid',stop: function(){
$(this).draggable('option','revert','invalid');
}
});
$('.drag').droppable({
greedy: true,tolerance: 'touch',drop: function(event,ui){
ui.draggable.draggable('option',true);
}
});
