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?
See if it fits your needs, setting tolerance
option of droppable to pointer
:
tolerance: 'pointer',