Jquery UI - Drag shape, but keep a copy of the original shape?

See http://jqueryui.com/demos/droppable/#photo-manager for an example -- the trick is to clone the original element using something like $( ".selector" ).draggable( "option", "helper", 'clone' );


Here is Running Example for intended task -

$(function () {

    $("#draggable").draggable({
        helper: "clone",
        cursor: 'move'
    });
    $("#container").droppable({
        drop: function (event, ui) {
            var $canvas = $(this);
            if (!ui.draggable.hasClass('canvas-element')) {
                var $canvasElement = ui.draggable.clone();
                $canvasElement.addClass('canvas-element');
                $canvasElement.draggable({
                    containment: '#container'
                });
                $canvas.append($canvasElement);
                $canvasElement.css({
                    left: (ui.position.left),
                    top: (ui.position.top),
                    position: 'absolute'
                });
            }
        }
    });

});
 #draggable {
     width: 20px;
     height: 20px;
     background:blue;
     display:block;
     float:left;
     border:0px
 }
 #container {
     width:200px;
     height:200px;
     background:yellow;
     margin:25px;
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
    <div id="draggable" class="ui-widget-content"></div>
</div>
<div id="container" class="ui-widget-content">Drop blue box here..</div>

Link To JS Fiddle http://jsfiddle.net/4VRUK/

improve it further as you want.


Add the helper: clone option.