SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div class="draggable ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div class="droppable ui-widget-header">
    <p>Drop here</p>
</div>

CSS

.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

JavaScript

$(".draggable").mousedown(function(event) {
  $(this).draggable('option', { helper : event.ctrlKey ? 'clone' : 'original'});
}).draggable({ revert: "invalid" });
$(".droppable").droppable(
    {
        drop: function(event, ui) {
            if (ui.draggable.hasClass("draggable")) {
                ui.draggable.remove();
            }
            $('<div class="draggable"></div>').text(ui.draggable.text()).draggable({revert: "invalid"}).appendTo(this);
        }
    });