jQuery UI dropable: изменение размера элемента при наведении курсора не работает

У меня есть отбрасываемый элемент jQuery UI, который я хотел бы увеличить при наведении на него перетаскиваемого элемента. Я пробовал использовать как параметр hoverClass, так и привязку к событию drophover.

Визуально оба этих метода работают нормально. Однако, как только перетаскиваемый объект выходит за исходную (меньшую) границу перетаскиваемого объекта, пользовательский интерфейс jQuery интерпретирует это как «выпадение», несмотря на то, что он все еще находится в пределах текущей (большей) границы.

Например, js:

$("#dropable").droppable({
    hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});

css:

#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }

В этом случае, когда перетаскиваемый объект наводит курсор на перетаскиваемый объект, перетаскиваемый объект визуально увеличивается в размере до 200 пикселей. Если на этом этапе перетаскиваемый объект перемещается вниз на 20 пикселей, я ожидаю, что он все еще будет зависать над перетаскиваемым объектом. Вместо этого пользовательский интерфейс jQuery запускает событие выпадения, и высота сбрасываемого объекта становится 10 пикселей.

Кто-нибудь знает, как заставить его вести себя так, как я ожидал?

Пример jsFiddle: http://jsfiddle.net/kWFb9/