title: How do you resize a cloned jQuery UI element (image)
body: <p>I have some particular need to clone an element (image) and be draggable inside a container and still retain its draggable (but not clone) once inside.</p>
  
  <p>I want to make only the cloned elements dragged inside the container to also be  re-sizable, but I cannot get it to work.</p>
  
  <p>I can only get the parent element to resize. Is there any way to only .resize the cloned element?</p>
  
  <p>Somewhat wonky but working example: <a href="http://jsfiddle.net/rGUma/4/" rel="nofollow">http://jsfiddle.net/rGUma/4/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="drag"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
  &lt;div class="drag"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
  &lt;div class="drag"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
  &lt;div class="drop-zone"&gt;&lt;/div&gt;
  
  
    &lt;script&gt;
      $(".drop-zone").droppable({
          accept: '.drag',
          drop: function(event, ui) {
              var $clone = ui.helper.clone();
              if (!$clone.is('.inside-drop-zone')) {
                  $(this).append($clone.addClass('inside-drop-zone').draggable({
                       containment: '.drop-zone'
                  }));
              }
          }
      });
      $(".drag").draggable({
          helper: 'clone'
      });
  
      //this works but I dont want it on outside elements
       $( '.drag' ).resizable({  
        helper: "ui-resizable-helper"
      });
  
       //this doesn't work on cloned images but what I want working       
      $( '.drop-zone img' ).resizable({  
        helper: "ui-resizable-helper"
      });        
  
      // '.inside-drop-zone img'  also doesnt work
  
  });​
  
  &lt;/script&gt;
  </code></pre>
  
  <p>ps. If someone can explain why it doesn't work it would be greatly appreciated.</p>