rex rex - 4 months ago 29
jQuery Question

jQuery duplicate and drag an image

I am trying to create a small application where a user can drag an image an move it around.

I am using jQuery UI. I am able to create a clone but the drag stuff is not working. Also, when the clone is created it adds next to the "this" image. I want the clone and the original image to be on top of each other. So that the mousedown event creates a new image and makes it drag able, hence getting a clone effect.

A demo is at

.draggable {

<div class="draggable"><img src="images/imageA.png" /></div>
<div class="draggable"><img src="images/imageB.png" /></div>

<script type="application/javascript">


You should probably be using jQueryUI's draggable functionality to do the cloning:

$( ".draggable" ).draggable({ helper: "clone" });

Update: Since the above doesn't really answer your entire question, I created a jsfiddle of what I think you're trying to do.

$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {