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

Question

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

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

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

Answer 1

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

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

我已经制作了小盒子贪婪的droppables 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);
    }
});