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.