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

Question

I have an interesting question. Theoretically, suppose you have a navigation bar on the left with a series of shapes: a circle, a square, and a triangle, and to the right of the navigation bar you have an empty canvas.

Using JQuery UI or JQuery Mobile, is it possible to be able to drag shapes from the navigation bar onto the canvas, but so that the original shape still remains in the bar?

Thanks a lot LS

Answer 1

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

Answer 2

Here is an example run for the 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.

Answer 3

Add the helper: clone parameter.

Answer 4

Add helper: clone to options. If you want the original object to remain visible, you must set this explicitly:

 $(".sortable").sortable({ helper: 'clone', start: function(event, ui) { $(ui.item).show() }