4

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>
rex
  • 985
  • 5
  • 28
  • 48

1 Answers1

13

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());
});
Kevin Stricker
  • 17,178
  • 5
  • 45
  • 71
  • Just a quick question, when the element get's cloned, all it's 'droppable' elements don't react to it. Any idea how to rebind them to it? – dotty Aug 05 '11 at 08:04