dynamic drop event is not triggered on droppable

dynamic drop event is not triggered on droppable

I have this piece of code.
The problem is that the drop event never called.. 
What could be the reason? I want to be able to drop the element just after the target element is initialized as droppable.

  1. $('.draggable').draggable({ iframeFix: true, helper: 'clone', revert: 'invalid', drag: function (event, ui) { externalIframeContents.find('.getting-hovered-by-helper').css('box-shadow', ''); externalIframeContents.find('.ui-droppable').droppable("destroy"); var m_ui = ui; clearTimeout(timer); timer = setTimeout(function () { // if dragging is stopped for 500 seconds do this if(m_ui.position.top > iframeTop) { var elementBehindTheHelper = externalIframeDocument.elementFromPoint(m_ui.position.left + m_ui.helper.width() / 2, (m_ui.position.top - iframeTop) + m_ui.helper.height() / 2); $(elementBehindTheHelper).addClass("getting-hovered-by-helper").css('box-shadow', '2px 1px 12px 10px lightgreen'); $(elementBehindTheHelper).droppable({ iframeFix: true, drop: function(event, ui){ $(event.target).prepend($('.tester')) } }); } }, 500); }});