jQuery复制并拖动图像

时间:2011-07-13 03:15:32

标签: jquery jquery-ui

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

我正在使用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> 

1 个答案:

答案 0 :(得分:13)

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

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

更新:由于以上内容并未真正回答您的整个问题,因此我创建了一个jsfiddle我想要的想法

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