I have an interesting question. Theoretically, let's say you have a navigation bar on the left with a series of shapes: a circle, square and triangle and to the right of the nav bar you have a blank canvas.

Using Jquery UI or Jquery Mobile, would it be possible to be able to drag shapes from the navigation bar onto the canvas, but for the original shape to still remain in the bar?

Many thanks, LS

I have an interesting question. Theoretically, let's say you have a navigation bar on the left with a series of shapes: a circle, square and triangle and to the right of the nav bar you have a blank canvas.

Using Jquery UI or Jquery Mobile, would it be possible to be able to drag shapes from the navigation bar onto the canvas, but for the original shape to still remain in the bar?

Many thanks, LS

• javascript
• jquery
• html
• css
• jquery-ui

4 Answers 4

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.

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

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