Appending draggable into droppable container appends to wrong container

Question

There are many questions regarding draggable and droppable, but the titles are not that self-explanatory, and after checking around 20 questions, I decided to publish my problem here. I hope it's no exact duplicate...

The idea is to have a "grid" of droppables (.time-slot), similiar to a calendar, where every hour is a droppable. One can put multiple draggables (.allocation) on those droppables. When a draggable is dropped on a droppable, the draggable gets appended to the droppable, and repositioned to fit the top-left corner.

This is working as intended in the following jsfiddle: http://jsfiddle.net/58Utc/

The problem is: if you change the height of the draggable to 300% or more, the draggable gets mostly appended to the wrong element and is off by one.

How can I solve this?

Answer 1

See if it fits your needs, setting tolerance option of droppable to pointer:

tolerance: 'pointer',

DEMO jsFiddle