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（）。现在，克隆的元素包含可通过.draggable（）方法干扰新添加的处理程序的.ui-resizable-handler div，从而持久保留了该问题，因此在应用.draggable（）方法之前，我已将所有这些解除了。在克隆元素中找到的可调整大小的处理程序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对象使用扩展（）

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