How to drop larger object on a smaller one when near edge of the containment?

Question

I'm trying to drop a large box onto a smaller box. The large box seems to be 'over' the box only when its very center is inside the smaller box.

Can I change the part of the big box which needs to be over the smaller one?

Why? Because it all works fine until I add a containment. When the small box is near the edge of the containment the center of the large box can't get 'inside' the small one because it hits the edge of the area.

Not really any code to show. Its just something like:

$(bigbox).draggable({
    containment: $("#container")
})

$(smallbox).droppable({
     drop: dropped-function
})

Answer 1

If I understand correctly, you want to look at the droppable method's options, specifically tolerance. The default is intersect which means the big box has to overlap the small box by at least 50%. Setting the tolerance to touch will allow the big box to be dropped on the smaller box when it overlaps the smaller box by any amount.

I hope that helps.