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);
        });

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);
        });

• javascript
• jquery-ui
• jquery-ui-resizable

2 Answers 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);
        });

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./clone/

For JavaScript object use extend()

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