jQuery duplicate and drag an image

Question

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 http://www.kalomaya.com/dragable/index.html

.draggable {
float:left;
margin-right:10px;
margin-bottom:10px;
position:relative;
}

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

<script type="application/javascript">
$(function(){
    $(".draggable").mousedown(function()
    {
        $(this).children().clone().appendTo(this);
        $(this).children().draggable();
        });
});
</script> 

Answer 1

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) {
    $(this).after($(ui.helper).clone().draggable());
});