Question

我正在寻找一种方法来阻止可拖动的块被拖过另一个可拖动的块，反之亦然。或者也许如何检测它被拖过它。

http://jsfiddle.net/J7azG/27/ 提前谢谢。

Answer 1

我已经整理了一个简单的演示，可以检测您的可拖动中的重叠。由于他们不是本机支持在drop事件中恢复条件，因此我创建了自己的方法。这是一个有工作解决方案的jsFiddle

http://jsfiddle.net/J7azG/37/

Answer 2

使用jquery draggable提供的还原选项，您可以恢复无效丢弃和重叠的位置。

我修改了Keith.Abramo给出的答案。

请不要在重叠期间使用偏移而不是位置，因为位置变得混乱。

http://jsfiddle.net/J7azG/177/ 使用还原选项

ui.draggable.draggable('option','revert',true);
ui.draggable.draggable('option','revert',false);

另一种解决方案是将可拖动的拖放器设置为使用还原无效＆＃39;选项就可以了。

http://jsfiddle.net/htWV3/1219/

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>

JS

$('.drop').droppable({
  tolerance: 'fit'
});

$('.drag').draggable({
 revert: 'invalid',
 stop: function(){
     $(this).draggable('option','revert','invalid');
 }
});

$('.drag').droppable({
 greedy: true,
 drop: function(event,ui){
    ui.draggable.draggable('option','revert',true);
 }
});

免责声明：我不确定小提琴的作者是谁。

jquery ui - 防止draggable被放置在droppable div中的另一个上面

2 个答案: