jquery - 如果在此 div 之外且在其他可拖动项内部，则可拖动恢复(同时使用无效和有效恢复选项)

Question

在 ui 可拖动对象 ( http://jqueryui.com/demos/droppable/#revert ) 上，如果 div 位于一个 div 内而不位于另一个 div 内，是否可以恢复该 div？例如像这样

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

但是由于明显的原因，这是行不通的..我可以条件吗？..当它位于这个可放置的内部而不是那个可放置的内部时？

Answer 1

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

默认情况下，您的可拖动对象应以 revert:'invalid' 开头。如果它们被拖入大盒子内，则无需执行任何操作，在我的示例中使用 tolerance:'fit'，因此小盒子必须完全位于内部才能被接受。

我已经用tolerance:'touch'让小盒子贪婪地放置了，所以如果拖动的小盒子接触到另一个小盒子，它将调用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);
    }
});