Изменяемый клонируемый элемент пользовательского интерфейса jQuery (.clone (true)) не изменяет размер - PullRequest
Новая
       15

Изменяемый клонируемый элемент пользовательского интерфейса jQuery (.clone (true)) не изменяет размер

2 голосов
/ 30 сентября 2010

У меня странная проблема с клонированными элементами (использующими .clone (true)) с перетаскиваемыми и изменяемыми размерами из jQuery UI. После клонирования клонированные элементы не имеют этих функций, они просто не работают.

Я искал различные решения, такие как назначение функций после клонирования и сохранение проблемы.

Вот код 

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

Ответы [ 2 ]

6 голосов
/ 30 сентября 2010

Я нашел решение своей проблемы. Используя .clone (true) для изменяемых размеров элементов, обработчики событий, похоже, не работают, поэтому вместо этого я делаю простой .clone (). Теперь клонированный элемент содержит div .ui-resizable-handler, которые мешают вновь добавленным обработчикам методом .draggable (), тем самым сохраняя проблему, поэтому перед применением метода .draggable () я удалил все. В клонированном элементе найдены div-компоненты ui-resizable-handler.

Перетаскиваемая функциональность работает без проблем.

Рабочий пример 

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);
        });
0 голосов
/ 30 сентября 2010

JQuery.clone() будет работать только для DOM.Таким образом, вы можете сделать его изменяемым или перетаскиваемым, только после добавления его к родителю.

См. Документы: http://api.jquery.com/clone/

Для объекта JavaScript используйте extend ()

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

...