Question

下面的代码允许我在页面上有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>

如果我这样做，它工作正常，但我不想用不同的类名创建相同的功能。

    $（function（）{             $（'。chaser'）。draggable（{helper：“clone”}）;             $（'。chaser'）。bind（'dragstop'，function（event，ui）{                 $（本）。经过（$（ui.helper）.clone（）拖动（））;
            }）;
        }）;

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

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

<强> JS

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

使用jquery中的动态函数删除后，拖动，克隆和调整大小

1 个答案: