title: jQuery UI Resizable + Draggable: disappearing on drop
body: <p>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.</p>
  
  <p>Does this appear to be a CSS generated issue? I have tried changing the z-index but to no avail.</p>
  
  <p>Does anyone have any suggestions as to what would cause this?</p>
  
  <p>Issue Seen Here:
  <a href="http://jsfiddle.net/xBB5x/9662/" rel="nofollow">http://jsfiddle.net/xBB5x/9662/</a></p>
  
  <p>JS:</p>
  
  <pre><code>$(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);
          }
      });
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container"&gt;      
      &lt;div id="toolbar"&gt;
         Tools:
         &lt;div class="droppableShape strokeTool"&gt;
             &lt;img width="125" src="http://41.media.tumblr.com/75b247a33fee823ac735d86270cfa813/tumblr_mp5loljbFz1s56exfo1_500.png" /&gt;
         &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="canvas_area"&gt;
          &lt;div class="canvas ui-droppable" id="page1"&gt;&lt;img src="http://www.astrologychanneletc.com/wp-content/uploads/2014/09/blankcanvas.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>