我正在尝试创建一个小应用程序,用户可以拖动图像并移动它。
我正在使用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>
答案 0 :(得分:13)
您可能应该使用jQueryUI的可拖动功能来进行克隆:
$( ".draggable" ).draggable({ helper: "clone" });
更新:由于以上内容并未真正回答您的整个问题,因此我创建了一个jsfiddle我想要的想法。
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});