Jquery machen ein Clone-Bild ziehbar und in der Größe veränderbar

Question

Ich habe versucht, ein geklontes Bild in der Größe veränderbar und ziehbar zu machen.

Im folgenden Beispiel kann ich nur skalierbar oder ziehbar auf dem Klon-Image, aber nicht beides erhalten. Irgendeine Idee?

$('#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 
     } 
    } 
    }); 

Mein example.

Answer 1

Ich habe einen Weg gefunden, es zu tun.

Grundsätzlich klonen statt das Element, das ich brauchte, um ein neues zu erstellen.

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(); 

Ich aktualisierte meine jsfiddle.

Prost.