Jquery drag and drop ui problem

Here is my code (the question follows)

function init() {
  $('.schedule_event').draggable( {
    cursor: 'move',
    containment: 'document',
    revert: true,
    helper: 'clone'
  } );
  $('.schedule_time').droppable( {
    drop: handleDropEvent
  } );
}    

function handleDropEvent( event, ui ) {
      var draggable = ui.draggable;
      ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
      ui.draggable.draggable( 'option', 'revert', false );
    }

So, I have a left column with about 50 events.开发者_Python百科 On the right side is a schedule with periods of 1 hour each. I want to drag and drop the events on a time period. This works.

However, the event on the left column disappears when dropped on the time period and I need to have the events of the left column untouched (they must remain after the drop, so I guess that I have to duplicate the div on drop in order to have 2 of them, but I don't know how to do that).

How can the events remain on the left menu after the drop (in other words, how to duplicate the div on drop event)?

Instead of

ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );

try

ui.draggable.clone().position( { of: $(this), my: 'left top', at: 'left top' } );

clone will create a copy rather than moving the actual element.