jQuery复制并拖动图像 [英] jQuery duplicate and drag an image

问题描述

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

I am trying to create a small application where a user can drag an image an move it around.

我正在使用jQuery UI.我能够创建一个克隆，但拖动的东西不起作用.同样，创建克隆后，它将添加到此"图像旁边.我希望克隆和原始图像彼此重叠.这样mousedown事件将创建一个新图像并使它能够拖动，从而获得克隆效果.

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.

演示位于 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> 

推荐答案

您可能应该使用jQueryUI的可拖动功能来进行克隆:

You should probably be using jQueryUI's draggable functionality to do the cloning:

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

更新:由于以上内容并不能真正回答您的整个问题，因此我创建了 jsfiddle 我认为您正在尝试做的事情.

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());
});

这篇关于jQuery复制并拖动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！