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

- Iulian

Answer 1

我已经找到了解决问题的方法。对于可调整大小的元素，使用.clone（true）似乎无法正常工作，因此我使用简单的.clone（）代替。现在，克隆的元素包含.ui-resizable-handler divs，这些div干扰了.draggable（）方法添加的新处理程序，从而导致问题持续存在，因此在应用.draggable（）方法之前，我删除了克隆元素中找到的所有.ui-resizable-handler divs。

可拖动功能没有任何问题。

工作示例

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

- Iulian

---

这是正确的。如果您复制outerHTML并附加到新元素，则它甚至可以正常工作。 - analytical_prat

Answer 2

JQuery.clone() 只适用于 DOM。所以您只能在将其附加到父级后使其可调整大小或可拖动。

请参阅文档： http://api.jquery.com/clone/

对于 JavaScript 对象，请使用 extend()。

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

- Vikas