jQuery 复制并拖动图像

Question

我正在尝试创建一个小型应用程序，用户可以在其中拖动图像并移动它。

我正在使用 jQuery UI。我能够创建一个克隆，但拖动的东西不起作用。此外，当创建克隆时，它会添加到“此”图像旁边。我希望克隆图像和原始图像彼此重叠。这样 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());
});