3

我在克隆元素（使用 .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);
        });
4

2 回答 2

9

我找到了解决我的问题的方法。在可调整大小的元素上使用 .clone(true)，事件处理程序似乎不起作用，所以我做了一个简单的 .clone()。现在，克隆的元素包含 .ui-resizable-handler div，它们通过 .draggable() 方法干扰新添加的处理程序，从而使问题持续存在，因此在应用 .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);
        });
于 2010-09-30T11:21:35.063 回答
0

JQuery.clone()仅适用于 DOM。因此，只有在将其附加到父级之后，您才能使其可调整大小或可拖动。

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

对于 JavaScript 对象，使用 extend()

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

于 2010-09-30T10:26:07.497 回答