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/