如何更改一些jQuery代码以使矩形可拖动？

下面是一些使用jQuery的代码。点击一个按钮将复制一个原始的矩形。如何更改一些jQuery代码以使矩形可拖动？

如何让所有矩形可拖动？

CSS：

.my_rectangle { 
    width: 200px; 
    background: pink; 
}

HTML：

<div id="original_rectangle" class="my_rectangle">original rectangle</div> 
<button id="copy_button">Copy</button>

的Javascript：

var count = 1 
$("#copy_button").click(function() { 
    copy = $("#original_rectangle").clone() 
    copy.removeAttr("id").html("copy " + count).appendTo("body") 
    count += 1 
})

（鸣谢：谢谢用户豪驰为代码的原始版本）

来源

2011-03-18 Winston C. Yang

更改此：

copy.removeAttr("id").html("copy " + count).appendTo("body")

...这样的：

copy.removeAttr("id").html("copy " + count).appendTo("body").draggable();

这是假设您'使用jQuery UI库。

另外，用分号终止您的语句是一个不错的主意。 JavaScript的自动分号插入偶尔会导致棘手的错误。最典型的例子：

function f(){ 
    return 
    { 
    some : 'value' 
    } 
}

当然，在这个例子中，支架风格分号插入密谋打造的模糊性，所以它的对阵双方分号插入一个参数，并把打开支架上新的生产线。

来源

2011-03-18 21:48:19

我使用Python。（对于不知道的读者，Python中的换行符像 J中的分号一样）。代码更简洁，没有分号。感谢您使用Javascript中有关分号的建议和示例。 – 2011-03-19 17:40:13

在上面的评论中，“J.”是Javascript。我可能在完成前意外地敲入了输入按钮。 – 2011-03-19 17:42:50

@Winston，是的，你的代码显然感觉没有分号的更多Pythonic。但是在Python中，换行符本质上具有分号的作用，所以没有猜测。在JavaScript中...好吧，它可能会让人困惑。查看[ECMA docs（PDF）]（http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf），第7.9.1节。我宁愿使用分号并确定结果。 – 2011-03-19 19:54:39

如果您使用jQueryUI它看起来像这样：

var count = 1 
$("#copy_button").click(function() { 
    copy = $("#original_rectangle").clone() 
    copy.removeAttr("id").addClass("dragMe ui-widget-content").html("copy " + count).appendTo("body") 
    count += 1 
}) 

$("dragMe").draggable();

来源

2011-03-18 21:45:48 Moses

考虑使用jQueryUI。看看他们的演示draggable，看看它是你在找什么。

来源

2011-03-18 21:46:36 epaik

我推荐使用jQuery UI库进行可拖动，否则你将最终重新实现他们所做的大部分相同的事情。

http://jqueryui.com/demos/draggable/

创建draggble会是这个样子：