Reputation: 2943
I have a div with class .myClass, I am cloning it by clicking on #cloneIT It clone that div perfectly but when I drag it always dragged first div. here my code:
$("document").ready(function(){
$(".myClass").draggable({ containment: 'parent' });
var countClones = 0;
$("#cloneIt").click(function(){
$('.myClass').clone(true).attr('id',$('div.myClass')[0].id+countClones).prependTo('body');
countClones += 1;
var newDiv = $("<div>Cloned: " + countClones + "</div>");
$("body").append(newDiv);
return false;
});
});
jsFiddle: http://jsfiddle.net/qQ6ws/3/
1) When u click on Clone It, plz drag Test, It will have cloned version which I am not able to click or drag.
2) Fixed in update
UPDATE: http://jsfiddle.net/qQ6ws/3/
I have fixed second issue now only problem is i can't drag cloned version or even click them Thanks for any help.
Upvotes: 0
Views: 766
Reputation: 25786
I guess this is what you want ? Cloning the draggable element doesn't seem to clone the events as well even with clone(true) passed in as the parameter. I have noticed this with other jQuery controls also such as droppable. You have to explicitly call .draggable()
on the cloned element.
Upvotes: 1
Reputation: 10187
I think when you clone with "true" argument it also copies the event handlers, which breaks the "draggable"-implementation. Probably only option is to clone without the "true" argument and re-register the event listeners as needed.
Upvotes: 1