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

Question

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

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

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

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);
    }
});