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

问题描述

在ui拖动（ http://jqueryui.com/demos/droppable/#revert）是否可以还原div，如果它在一个div内，如果不在另一个div内？例如这样

On ui draggables ( http://jqueryui.com/demos/droppable/#revert ) is it possible to revert a div if its inside one div and if not inside another one? for example like this

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

但是因为明显的原因而无法正常工作。你的想法是正确的，你必须让小盒子贪婪，而不是在那个可耻的内部？

but that wouldn't work because of obvious reasons.. can I condition that though?.. for when its inside this droppable and not inside of that droppable?

推荐答案

droppables并处理它们上的 drop 事件。这个棘手的部分是取消拖动操作。

Your thinking was correct, you have to make the small boxes greedy droppables and handle the drop event on them. The tricky part is to cancel the drag operation.

默认情况下，您的拖动应该以还原为起始：'invalid'。如果将其拖放到大框内，则不需要做任何事情，在我的例子中，我使用 tolerance：'fit'，所以小盒子必须完全在里面被接受。

By default, your draggables should start as revert:'invalid'. You don't have to do anything if they are dragged inside the big box, which in my example uses tolerance:'fit', so the small boxes must be completely inside to be accepted.

我已经制作了小盒子贪心的下拉菜单，含有宽容：'touch'，所以如果拖小盒子会触摸另一个小盒子，它会调用拖动处理程序。

I have made the small boxes greedy droppables with tolerance:'touch', so if the dragged small box touches another small box, it will call the drag handler on it.

要从一个拖动处理程序，您可以将拖动的项目设置为 revert：true ，这迫使它恢复，即使它被丢弃在接受的droppable上。要确保您可以再次拖动该小盒子，在其拖动停止事件中，您必须重置 revert：'invalid'。 stop 事件将在每次成功下降时触发，如果恢复，则在恢复完成后，它将触发。

To cancel the drag operation from a drag handler, you can do a workaround of setting the dragged item to revert:true, which forces it to revert even though it was dropped on an accepting droppable. To make sure you can drag that small box again, on its drag stop event you have to reset revert:'invalid'. The stop event will fire on every successful drop and if it's reverting, it will fire after reverting has completed.

您可以在这里试用现场演示： http://jsfiddle.net/htWV3/1/

You can try out a live demo here: 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：

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

这篇关于如果在此div外部和其他拖动内部（使用无效和有效的还原选项），可拖动还原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！