javascript - 当我克隆一个可拖动的 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

我们为什么不首先销毁原始元素 Draggale 和可调整大小的插件，例如：

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

然后制作一个像这样的克隆：

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

然后将其附加到#orignaldiv parentlike ：

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

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

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

可能会有所帮助！