jQueryの - 'ドラッグDIV' の大きさは 'ドロップ可能DIV' よりも大きい場合Dropイベントはoccuringない

Question

可能性の重複：

jQuery UI draggable to smaller droppable

私はドラッグのdivやドロップ可能div要素を持っています。 draggable divは、drop可能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より小さくした場合、正常にトリガーされたイベントがドロップされました。

どうすれば解決できるか教えてください。

Answer 1

はあなたがドラッグ可能なdivのは50％でドロップ可能div要素に重なるように有することを意味するドロップ可能な方法

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

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

デフォルトはintersectあり、中にtouchにtoleranceオプションを変更することができます。

Answer 2

あなたがする必要があるのは、あなたの落書きの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 

それは50％のオーバーラップを必要とし、intersectあります。恐らくpointerを試してみてください。