jQuery UI resizable cloned element(.clone(true)) doesn't resize

Question

Hi,

I'm having this strange problem with cloned elements(using .clone(true)) with draggable and resizable functionalities from jQuery UI. After cloning, the cloned elements don't have these functionalities, they just don't work.

I have been looking for various solutions, like assigning the functionalities after cloning and still having the problem.

Here is the code

jQuery(document).ready(function(){
            jQuery('#res').draggable({
                containment: 'body',
                grid: [ 10, 10 ],
                snap: true,
            });
            jQuery('#res').resizable({
                grid : 10,
                handles : 's'
            });
            var res_clone = jQuery('#res').clone(true);
            jQuery(res_clone).attr('id', 'res_clone');
            jQuery('#res').parent().append(res_clone);
        });

Answer 1

JQuery.clone() will only work for DOM. So you can make it resizable or draggable, only after you append it to parent.

See docs: http://api.jquery.com/clone/

For JavaScript object use extend()

http://api.jquery.com/jQuery.extend/

Answer 2

I've found a solution to my problem. Using .clone(true) on resizable elements, the event handlers does not seem to work so instead I do a simple .clone(). Now, the cloned element contains the .ui-resizable-handler divs that interfere with the newly added handlers by the .draggable() method, thus persisting the problem, so before applying the .draggable() method I've stripped all the .ui-resizable-handler divs found in the cloned element.

The draggable functionality works without any problems.

Working example

jQuery(document).ready(function(){
            jQuery('#res').draggable({
                containment: 'body',
                grid: [ 10, 10 ],
                snap: true,
            });
            jQuery('#res').resizable({
                grid : 10,
                handles : 's'
            });

            var res_clone = jQuery('#res').clone();
            jQuery(res_clone).attr('id', 'res_clone');
            jQuery(res_clone).find('.ui-resizable-handle').remove();
            jQuery(res_clone).draggable({
                containment: 'body',
                grid: [ 10, 10 ],
                snap: true,
            });
            jQuery(res_clone).resizable({
                grid : 10,
                handles : 's'
            });

            jQuery('#res').parent().append(res_clone);
        });