Jquery - 如果'draggable div'的大小大于'droppable div'，则不会发生Drop事件[重复]答案

【问题标题】：Jquery - Drop event not occuring if size of 'draggable div' is greater than 'droppable div' [duplicate]Jquery - 如果'draggable div'的大小大于'droppable div'，则不会发生Drop事件[重复]
【发布时间】：2012-05-10 19:19:10
【问题描述】：

可能重复：
jQuery UI draggable to smaller droppable

我有一个可拖动的 div 和一个可放置的 div。可拖动 div 的高度和宽度大于可放置 div。所以 drop 事件没有发生。

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

当我将可拖动 div 的维度设置为小于可放置 div 时，成功触发了 drop 事件。

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

【问题讨论】：

标签： jquery css html draggable droppable

【解决方案1】：

您可以在droppable方法中将tolerance选项更改为touch

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

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

默认为intersect，这意味着您的可拖动 div 必须与可放置 div 重叠 50%。

【讨论】：

【解决方案2】：

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

指定使用哪种模式来测试可拖动对象是否“越过”可放置对象。可能的值：'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。

【讨论】：