jQuery UI可调整大小的克隆元素(.clone(true))不会调整大小

Question

我遇到了克隆元素的奇怪问题(使用.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);
        });

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