jQuery UI可調整大小的克隆元素（.clone（true））不會調整大小

Question

我在使用jQuery UI中具有可拖動和可調整大小功能的克隆元素（使用.clone（true））時遇到了這個奇怪的問題。 克隆后，克隆的元素不具有這些功能，它們只是不起作用。

我一直在尋找各種解決方案，例如在克隆后分配功能並仍然遇到問題。

這是代碼

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

我已經找到解決問題的辦法。 在可調整大小的元素上使用.clone（true），事件處理程序似乎不起作用，因此我改用了一個簡單的.clone（）。 現在，克隆的元素包含.ui-resizable-handler div，它們通過.draggable（）方法干擾新添加的處理程序，因此仍然存在該問題，因此在應用.draggable（）方法之前，我已經剝離了所有。在克隆的元素中找到ui-resizable-handler div。

可拖動的功能可以正常工作。

工作實例

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()僅適用於DOM。 因此，只有將其附加到父級之后，才能使其可調整大小或可拖動。

參見文檔： http : //api.jquery.com/clone/

對於JavaScript對象，請使用extend（）

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