Jquery duplicate and drag and drop image

Question

I am trying to create a small application in which a user can drag and drop an image by moving it.

I am using jQuery UI. I can create a clone, but the drag and drop stuff doesn't work. In addition, when a clone is created, it is added 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 pull, therefore, getting the cloning effect.

The 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 use the jQueryUI draggable function to clone:

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

Update: since the above does not answer all your question, I created a jsfiddle of what I think you are trying to do.

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