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

Question

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

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

但是由于明显的原因，这不起作用..我可以设置条件吗？..因为它在这个 droppable 里面而不是那个 droppable 里面？

Answer 1

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

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

我已经用tolerance:'touch' 把小盒子做成了贪婪的droppables，所以如果被拖动的小盒子碰到另一个小盒子，它会调用它上面的drag 处理程序。

要从拖动处理程序取消拖动操作，您可以将拖动的项目设置为revert:true，这会强制它恢复，即使它被放置在一个接受的可放置对象上。为确保您可以再次拖动该小框，在其拖动停止事件中您必须重置 revert:'invalid'。 stop 事件将在每次成功放置时触发，如果它正在还原，它将在还原完成后触发。

您可以在这里试用现场演示：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','revert',true);
    }
});