jQuery UI Resizable + Draggable: disappearing on drop - jquery-ui

Question

I am trying to allow an image to be dropped into a container and enable resizing, however, when dropped it disappears until the handle is dragged. I have no errors in the console.
Does this appear to be a CSS generated issue? I have tried changing the z-index but to no avail.
Does anyone have any suggestions as to what would cause this?
Issue Seen Here:
http://jsfiddle.net/xBB5x/9662/
JS:
$(document).ready(function(){
$(".droppableShape").draggable({
helper:'clone'
});
$(".canvas").droppable({
accept: ".droppableShape",
tolerance: 'fit',
drop: function(event,ui){
// Set variables
var new_field = $(ui.helper).clone().removeClass('droppableShape');
var droppable_page = $(this);
var droppableOffset = $(this).offset();
// Check the tool type
switch(new_field.attr('class').split(" ")[0]) {
case "strokeTool":
new_field.css('top', ui.position.top - droppableOffset.top);
new_field.css('left', ui.position.left - droppableOffset.left);
break;
default:
console.log("A class type was not detected");
}
new_field.find( "img" ).resizable({
maxHeight: 47,
maxWidth: 151,
minHeight: 18,
minWidth: 60,
aspectRatio: 151 / 47
});
// Set Draggable Options
new_field.draggable({
containment: droppable_page,
});
// Add to drop area
$(this).append(new_field);
}
});
});
HTML:
<div class="container">
<div id="toolbar">
Tools:
<div class="droppableShape strokeTool">
<img width="125" src="http://41.media.tumblr.com/75b247a33fee823ac735d86270cfa813/tumblr_mp5loljbFz1s56exfo1_500.png" />
</div>
</div>
<div id="canvas_area">
<div class="canvas ui-droppable" id="page1"><img src="http://www.astrologychanneletc.com/wp-content/uploads/2014/09/blankcanvas.jpg"></div>
</div>
</div>

Answer 1

I'm not sure why, but calling .resizable() on your img causes a div.ui-wrapper to be created as its parent, and this new div has a width and height of 0. The solution is to call .resizable() on new_field and not the img inside of it:
new_field.resizable({
maxHeight: 47,
maxWidth: 151,
minHeight: 18,
minWidth: 60,
aspectRatio: 151 / 47
});
Then, to grow/shrink your img as its parent div is resized, add an event listener:
new_field.on("resize", function(rEvent, rUI) {
new_field.find("img").css({
"width": rUI.size.width,
"height": rUI.size.height
});
});
works for me in Chrome and Firefox on Linux.
http://jsfiddle.net/xBB5x/9663/