Question

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

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