jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

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

你的想法是正确的,你必须使小盒子贪婪的droppables和处理他们的drop事件.棘手的部分是取消拖动操作.

@L_801_5@认情况下,您的拖动应该以恢复为开始：’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);
    }
});