Jquery make a clone image draggable and resizable

Question

I have been trying to make a cloned image resizable and draggable.

In the following example I can only managed to get resizable or draggable on the clone image but not both. Any idea?

$('#canvas').droppable({
    drop: function(event, ui) {
      if (ui.draggable[0].id) {
        var elem = $(ui.helper).clone();
        ui.helper.remove();
        elem.draggable({
          cursor: 'move',
          containment: '#canvas'
        });
        //elem.resizable();  // draggable works but not resizable
        $(this).append(elem);
        elem.resizable();    // resizable works but not draggable
      }
    }
  });

My example.

Answer 1

I found a way to do it.

Basically instead of clone the element I needed to create a new one.

var $image = $('<div class="container"><img src="http://lasolanadigital.com/wp-content/uploads/2014/12/monigote.jpg" class="dude_new" height="200px" width="150px" /></div>');
$('#canvas').append($image);
$image.draggable();
$image.find('.dude_new:first').resizable();

I updated my jsfiddle.

Cheers.