Question

Possible Duplicate:
jQuery UI draggable to smaller droppable

I have a draggable div and a droppable div. The draggable div is greater in height and width than droppable div. So the drop event is not happening.

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

When I made dimension of draggable div smaller than dropable div, then drop event triggered successfully.

Please guide me on how can I resolve this.

Answer 1

You can change the tolerance option to touch in the droppable method

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

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

The default is intersect, which means your draggable div has to overlap the droppable div by 50%.