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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With