I'm working on a project whare I need to allow drag and dropping from a sidebar to some content.

It is very important, that the content (when hovering it with the draggable) expands with applying some padding (to the inner content, in the example code an image).

When I enter the droppable with the draggable, the padding is added, which makes the droppable a bit bigger in size (both width and height). Jquery UI does not "recognize" this change in size, it means that when I move the draggable a bit closer to the bottom border (or to the right border), the "out" event is already triggered (even if it's clear that the draggable is still within the (new) boundaries of the droppable).

Only after moving the draggable a lot around (going close to the left and top border without leaving the droppable), jquery ui "recognizes" the new (bigger) size of the droppable, and you can move very close to the bottom or right border of the box, without triggering the "out" event.

for my project, it is very important, that I can go fully to the bottom and right border of the droppable, without the "out" event being fired.

Anybody has a clue how can I "teach" jquery ui in drag mode that the size of the droppable has changed? (without moving around in the droppable and aproaching left and top border)

Example code is here: codepen.io/CESteiner/pen/VNVJzV