如果在此div之外和其他draggables内部，则可拖动恢复（使用无效和有效的恢复选项）

在ui draggables（ http://jqueryui.com/demos/droppable/#revert ）上可以恢复一个div，如果它在一个div内，如果不在另一个div内？ 比如这样

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" }); 

但由于显而易见的原因，这不起作用..我可以这样做吗？…当它在这个可放置的内部而不是在那个可放置的内部时？

Answer 1

你的想法是正确的，你必须使小盒子贪婪的droppables并处理它们上的drop事件。 棘手的部分是取消拖动操作。

默认情况下，您的draggables应该以revert:'invalid'开头revert:'invalid' 。 如果它们被拖到大盒子里面，你不必做任何事情，在我的例子中使用了tolerance:'fit' ，所以小盒子必须完全在里面才能被接受。

我已经制作了带有tolerance:'touch'的小盒子贪婪的droppables tolerance:'touch' ，所以如果被拖动的小盒子接触另一个小盒子，它将调用它上面的drag处理器。

要从拖动处理程序取消拖动操作，您可以执行将拖动项目设置为revert:true的解决方法revert:true ，即使在已接受的可放置项上删除它，也会强制它还原。 为确保您可以再次拖动该小方框，在其拖动停止事件中您必须重置revert:'invalid' 。 stop事件将在每次成功下降时触发，如果它恢复，它将在恢复完成后触发。

您可以在这里试用现场演示： http ： //jsfiddle.net/htWV3/1/

HTML：

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','revert',true); } });