Try making a clone and appending it to the body
:
$(".external-event").draggable({
revert: true,
appendTo: 'body',
helper: 'clone'
});
Check out the appendTo() documentation: JQuery UI API.
AppendTo designates which element the draggable helper should be appended to while dragging. By default this is set to the elements parent.
UPDATE:
Figured out a way to achieve the functionality you wanted in congruence with the nice scroll plugin. When the element is dragged it sets the original element to visibility:hidden
so the spot is still preserved and then when the item is dropped it reverts the visibility
. Here's the updated fiddle.