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

Question

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

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

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

Answer 1

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

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

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

要从拖动处理程序中取消拖动操作，您可以采取一种解决方法，将拖动的项目设置为revert:true，这会强制它恢复，即使它被放置在一个接受的 droppable 上。为确保您可以再次拖动该小框，在其拖动停止事件中您必须重置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);
    }
});