1

重複の可能性:
jQuery UI を小さいドロップ可能にドラッグ可能

ドラッグ可能な div とドロップ可能な div があります。ドラッグ可能な div は、ドロップ可能な 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");
          }
});

ドラッグ可能な div のサイズをドロップ可能な div よりも小さくすると、ドロップ イベントが正常にトリガーされました。

これを解決する方法を教えてください。

4

2 に答える 2

7

ドロップ可能な方法で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。

ドラッグ可能オブジェクトがドロップ可能オブジェクトの上にあるかどうかをテストするために使用するモードを指定します。可能な値: '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 に答える