bind drag event to cloned element [solved]

[devnull]

I am using drag and drop and need to clone the dropped element several times after it has been dropped.

If I use the jquery clone(true) method on the dropped element, then the element gets cloned, however the draggable event does not get bound to the cloned elements.

How can I bind an existing draggable() function to elements that are added dynamically ?

I have tried adding the 'draggable' class to the cloned element but that does not appear to work ?

Code:

....
onDrop: function(e,src){
  $src).detach().appendTo(td).css({'position':'','left':'','top':''});
  $('xxx').append($(src).clone(true))
}

[stworthy]

After cloned a object successfully, you must call .draggable(...) to make it draggable again.

Code:

onDrop: function(e,src){
  $src).detach().appendTo(td).css({'position':'','left':'','top':''});
  var obj = $(src).clone(true).appendTo('xxx');
  obj.draggable({...})
}