Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 883
jcrowson Avatar asked Oct 24 '11 16:10

jcrowson


3 Answers

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' );

like image 121
Blazemonger Avatar answered Nov 18 '22 13:11

Blazemonger


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.

like image 28
Haris Amjed Avatar answered Nov 18 '22 14:11

Haris Amjed


Add the helper: clone option.

like image 4
SLaks Avatar answered Nov 18 '22 15:11

SLaks