jQuery複製並拖動圖像

Question

我想創建一個小應用程序，用戶可以拖動圖像並移動它。

我正在使用jQuery UI。我能夠創建一個克隆，但拖動的東西不起作用。另外，創建克隆時，它會添加到「this」圖像旁邊。我希望克隆和原始圖像相互交疊。因此，mousedown事件會創建一個新圖像並使其可拖動，從而獲得克隆效果。

的演示是在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

你或許應該使用jQueryUI的的拖拽功能做克隆：

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

更新：由於上面並沒有真正回答你的整個問題，我創建了認爲你想要做的jsfiddle。

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