在 jquery 中使用动态函数拖放后拖动、克隆和调整大小答案

【问题标题】：drag, clone, and resize after drop with dynamic function in jquery在 jquery 中使用动态函数拖放后拖动、克隆和调整大小
【发布时间】：2013-12-30 02:00:23
【问题描述】：

下面的代码允许我在一个页面上有 5 个不同的项目，然后让我克隆我拖动到不同区域的任何项目，并允许我拖动新的克隆项目。但是，当我尝试将克隆项目移动到其他位置时，它会再次克隆该项目。我做错了什么？

<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>

如果我这样做，它可以正常工作，但我不想创建 5 个具有不同类名的相同函数。

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

所以我的主要目标是创建一个函数并传入类名，以便它知道只克隆该项目并且只克隆原始项目而不是克隆项目。然后允许我拖动项目并调整新克隆项目的大小。请指教。谢谢

【问题讨论】：

标签： javascript jquery-ui

【解决方案1】：

我希望这会对你有所帮助，我认为它并不完美，但非常接近jsfiddle

HTML

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

更新：我更新jsfiddle

【讨论】：

当你第一次鼠标按下 test1 或 test2 对象时，它不会让你克隆或拖动。然后当您第二次按下鼠标时，克隆和拖动工作正常。然后当您尝试拖动克隆时，它首先克隆另一个然后正常运行。
jsfiddle.net/QW3XD/3 不太正确，不知道为什么它不会在第一次鼠标按下时克隆并在拖动时再次克隆
你一开始没有让它可拖动，那为什么它首先不起作用，它在第一次mosuedown后开始工作
添加了 $(function () { $('#resizableImage').resizable(); $('#chase').draggable(); });但它仍然是先克隆对象
我让它按照我想要的方式工作。当然是在你的帮助下。但是还剩下一件事。如何使箭头图像在拖放区域而不是在原始区域中调整大小？这是小提琴链接jsfiddle.net/QW3XD/9