user969068
user969068

Reputation: 2943

jquery clone draggable click

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

Answers (2)

aziz punjani
aziz punjani

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

Lycha
Lycha

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

Related Questions