Question

I try to provide a predefined Object Grab to clone it later and populate the clones with further functionality. The problem I am facing is, that I can clone the objects, but only one of them is appended to the DOM afterwards.

The Code so far is:

var foo = jQuery.extend({}, Grab);
var bar = jQuery.extend({}, Grab);

$('body').append(foo);
$('body').append(bar);

I use jQuery.extend() because I need the .daggable feature of Grab with the clone.

Any suggestions are highly appreciated!

Answer 1

If Grab is an element you should normally use .clone(true, true) to copy it, not $.extend()

The true parameters will cause it to be a deep copy of the original object.

However this probably won’t correctly copy the draggable settings. Just because the object has been cloned, you’re not guaranteed that all of the state has been copied. In particular if any of the draggable state is stored in lexically scoped private variables it won’t work.

Likewise any other setup that the .draggable function does the first time it’s added to an element won’t have been done either.

IMHO, your best bet would be to use .clone(false) to make a shallow copy, and then call .draggable on the copies, and then re-attach their event handlers.