当我克隆一个可拖动的div时，为什么克隆不能拖动？

Question

我正在努力使克隆的div可拖动：

 $("div").clone(true).removeAttr("id").appendTo($("body")).draggable();  

我也试过这个：

 $("div").clone(true,true).removeAttr("id").appendTo($("body")).draggable();     

它创建了一个克隆，但该克隆不可拖动。谁能告诉我为什么这不起作用？

Answer 1

你走了。你不想clone(true)。只需clone()。前者也将克隆可拖动事件，这就是为什么它有这种奇怪的行为。

以下是一个示例：http://jsfiddle.net/byZXS/1/

$('div').draggable(); 
$('div').clone().appendTo('body').draggable();​

如何保存数据：

var data = $('div').data();
var newDiv = $("div").clone().appendTo('body').draggable();
newDiv.data(data);

此处示例：http://jsfiddle.net/byZXS/2/

Answer 2

为什么我们不首先销毁orignal元素draggale和resizable插件，如：

$("#orignaldivid").draggable("destroy");
$("#orignaldivid").resizable("destroy");

然后制作如下的克隆：

  var clone = $("orignaldivid").clone(true).attr("id", GetNewId()); //GetNewId may be any function to generate unique id

然后将其附加到#orignaldiv parent，如：

  $(clone).appendTo($("#orignaldivid").parent());

最后re-assign to orignal和assign to clone所有插件

$("#orignaldivid").draggable();
$("#orignaldivid").resizable();
$(clone).draggable();
$(clone).resizable();

可能会有帮助！