当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - drag, clone, and resize after drop with dynamic function in jquery

问题描述:

the code below allows me to have 5 different items on a page, and then let me clone any item I drag to different area and allow me to drag the new clone item. However, when I try to move the clone item to different location, it again clone that item. what did i do wrong?

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

if i do, it works fine but i do not want to create 5 the same function with just different class name.

$(function() {

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

$('.chaser').bind('dragstop', function(event, ui) {

$(this).after($(ui.helper).clone().draggable());

});

});

so my main goal is to create one function and pass in the class name so it knows to clone that item only and only clone the original and not the clone. Then allow me to drag the item around and resize the new clone item. please advise. thank you

网友答案:

I hope this will help you, its not perfect i think but quite near 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'));
           });
        }
    }

Update: I update jsfiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: