jQuery UI élément clonée redimensionnable (.clone (true)) ne redimensionne pas

Question

Je vais avoir ce problème étrange avec des éléments clonés (en utilisant .clone (true)) avec des fonctionnalités et draggable redimensionnables de jQuery UI. Après le clonage, les éléments clonés ne sont pas ces fonctionnalités, ils ne fonctionnent pas.

J'ai cherché différentes solutions, comme l'attribution des fonctionnalités après le clonage et ayant encore le problème.

Voici le 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

Je l'ai trouvé une solution à mon problème. L'utilisation .clone (true) sur les éléments redimensionnables, les gestionnaires d'événements ne semble pas fonctionner si je fais à la place d'un simple .clone (). Maintenant, l'élément cloné contient les divs .ui-redimensionnable-gestionnaire qui interfèrent avec les gestionnaires nouvellement ajoutés par la méthode .draggable (), persistant ainsi le problème, donc avant d'appliquer la méthode .draggable () Je l'ai déshabillé tout. ui-redimensionnable de gestionnaire divs trouve dans l'élément cloné.

La fonctionnalité draggable fonctionne sans aucun problème.

Exemple de travail

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

Answer 2

JQuery.clone() ne fonctionnera que pour DOM. Donc, vous pouvez le faire redimensionnable ou draggable, seulement après que vous ajoutez à parent.

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

Pour étendre l'utilisation d'objets JavaScript ()

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