1

可能重复：
jQuery UI 可拖动到更小的 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 事件。

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

4

2 回答 2

7

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

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

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

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

于 2012-05-10T19:44:35.857 回答
4

所有你需要做的就是改变tolerance你的droppable。

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

于 2012-05-10T19:42:57.237 回答