2010-09-30 30 views
1

我有克隆元素(使用.clone(true))与jQuery UI中的可拖动和可调整大小的功能这个奇怪的问题。克隆后,克隆的元件不具备这些功能,它们只是不起作用。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); 
     }); 

回答

5

我已经找到了解决我的问题。在可调整大小的元素上使用.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); 
     }); 
+0

.find( 'UI调整大小手柄。')除去(); ....这为我工作! – 2015-12-17 17:13:50

相关问题