Javascript 使用jquery中的动态功能拖放、克隆和调整大小
下面的代码允许我在一个页面上有5个不同的项目，然后让我克隆我拖动到不同区域的任何项目，并允许我拖动新的克隆项目。但是，当我尝试将克隆项目移动到其他位置时，它会再次克隆该项目。我做错了什么Javascript 使用jquery中的动态功能拖放、克隆和调整大小,javascript,jquery-ui,Javascript,Jquery Ui,下面的代码允许我在一个页面上有5个不同的项目，然后让我克隆我拖动到不同区域的任何项目，并允许我拖动新的克隆项目。但是，当我尝试将克隆项目移动到其他位置时，它会再次克隆该项目。我做错了什么 <blockquote> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title&g
<blockquote>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 5px; height: 5px; padding: 0.5em; }
.arrow h3 { text-align: center; margin: 0; }
</style>
<script>
function DragClone(id) {
$('.' + id).draggable({helper: "clone"});
$('.' + id).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
}
</script>
</head>
<body>
<div id="test1" class="i1" onmousedown="DragClone('i1');">
<img src="img1">
</div>
<div id="test2" class="i2" onmousedown="DragClone('i2');">
<img src="img2">
</div>
<div id="test3" class="i3" onmousedown="DragClone('i3');">
<img src="img3">
</div>
<div id="test4" class="i4" onmousedown="DragClone('i4');">
<img src="img4">
</div>
<div id="test5" class="i5" onmousedown="DragClone('i5');">
<img src="img5">
</div>
</body>
</html>
</blockquote>
因此，我的主要目标是创建一个函数并传入类名，以便它知道只克隆该项，只克隆原始项而不克隆克隆项。然后允许我拖动该项目并调整新克隆项目的大小。请告知。谢谢你我希望这会对你有所帮助，我认为这并不完美，但很接近 HTML 更新：
我更新当您第一次鼠标向下移动test1或test2对象时，它将不允许您克隆或拖动。然后，当您第二次向下鼠标时，克隆和拖动工作正常。然后，当您尝试拖动克隆时，它首先克隆另一个克隆，然后才能正常工作。它不太正确，不确定为什么它不在第一次鼠标按下时克隆，然后在dragYou上再次克隆。你一开始不使它可拖动，这就是为什么它不在第一次鼠标按下时工作，它在第一次鼠标按下后开始工作添加$function{$'resizebleimage'.resizeable；$'chase'.Dragable；}；但它仍然是先克隆对象，我也让它按照我想要的方式工作。当然是在你的帮助下。不过，还有一件事要做。如何使箭头图像在拖放区域而不是原始区域中可调整大小？这是小提琴链接
<div id="test1" class="cloneable" onmousedown="DragClone(this);">
<img src="img1.png">
</div>
<div id="test2" class="cloneable" onmousedown="DragClone(this);">
<img src="img2.png">
</div>
DragClone = function(elem) {
if($(elem).hasClass('cloneable')) {
$(elem).draggable({helper: "clone"});
$(elem).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable().removeClass('cloneable'));
});
}
}