jQuery UI Resizable + Draggable: disappearing on drop

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/