CODEWITHSUNDEEP
javascriptjquery
Gaurav
Gaurav

Reputation: 8487

When I clone a draggable div, why isn't the clone draggable?

I am trying to make a cloned div draggable :

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

I've also tried this:

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

It creates a clone but that clone is not draggable. Can anybody tell me why this is not working?

Upvotes: 1

Views: 210

Answers (2)

Gaurav
Gaurav

Reputation: 8487

Why not we first destroy the orignal elements draggale and resizable plugins like : 

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

Then make a clone like : 

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

Then append it to the #orignaldiv parent like :

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

And finally re-assign to orignal and assign to clone all plugins

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

May be helpful !

Upvotes: 0

Jivings
Jivings

Reputation: 23250

Here you go. You don't want to clone(true). Just clone(). The former will clone the draggable event as well, which is why it has that weird behaviour.

Here is an example: http://jsfiddle.net/byZXS/1/

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

How to preserve the data:

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

Example here: http://jsfiddle.net/byZXS/2/

Upvotes: 3

Related Questions