Jquery clone resizable draggable not working properly

Question

I am trying to clone a resizable and draggable div, but it does not work properly ...

This is my actual HTML code:

<div class="resizable" class="ui-widget-content"> <div class="menuTrigger"></div> <ul> <li class="clone">Clone</li> <li class="remove">Remove</li> </ul> </div> 

And this is my real jQuery code:

 function initialize(that){ $(that).resizable({ handles: 'n, e, s, w, ne, se, sw, nw' }); $(that).draggable({ stack: "div", distance: 0 }); $(that).find(".clone").click(function(){ var $clone = $(this).parents('.resizable').clone(); var offset = $(this).parents('.resizable').offset(); $('body').append($clone); initialize($clone); }); $(that).find(".remove").click(function(){ $(this).parents('.resizable').remove(); }); $(that).find(".menuTrigger").click(function(){ $(this).parent().find('ul').toggle(); }); } $(".resizable").each(function(){ initialize($(this)); }); 

Demo

Answer 1

The problem is that calling resizable adds handles to the element you are calling. So when you clone your resizable element, it clones handles and adds handles when calling resizable on the cloned element, so you get two sets of descriptors, one of which has no associated behavior.

One way to fix this is to remove the descriptors from the clone before calling resizable. Like this:

  $(that).find(".clone").click(function(){ var $clone = $(this).parents('.resizable').clone(); var offset = $(this).parents('.resizable').offset(); $clone.find('.ui-resizable-handle').remove() $('body').append($clone); initialize($clone); }); 

http://jsfiddle.net/bmja1fau/