Jquery - 如果'draggable div'的大小大于'droppable div'，则不会发生丢弃事件

Question

  

可能重复：
  jQuery UI draggable to smaller droppable

我有一个可拖动的div和一个可放置的div。可拖动的div的高度和宽度比droppable div更大。所以掉落事件没有发生。

<div id='draggable' style="width:500px; height:500px;">
       ABCABC
</div>


<div id='droppable' style="width:100px; height:100px;">
       XYZXYZ
</div>


$('#droppable').droppable({
          drop: function( event, ui ){
                        alert("Drop event occured");
          }
});

当我使draggable div的维度小于dropable div时，drop事件成功触发。

请指导我如何解决这个问题。

Answer 1

您可以在droppable方法

中将tolerance选项更改为touch

http://jqueryui.com/demos/droppable/#option-tolerance

$( "#droppable" ).droppable({ tolerance: "touch" });

默认值为intersect，这意味着您的可拖动div必须与droppable div重叠50％。

Answer 2

您需要做的就是更改您的dropable的tolerance。

  

指定用于测试draggable是否在“dropable”上方的模式。可能的值：'fit'，'intersect'，'pointer'，'touch'。

fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount

默认为intersect，需要50％的重叠。也许试试pointer。