title: Make image draggable and resizable within div
body: <p>Let me share what I actually want -</p>
  
  <ol>
  <li>Create a div.</li>
  <li>Onclick add an image to the div.</li>
  <li>Make this image draggable and resizable.</li>
  <li>We would be able to add multiple image into the div.</li>
  </ol>
  
  <p>Below is my code I've done so far -</p>
  
  <p>JS :</p>
  
  <pre><code>$.fn.extend({
        draggableChildren: function(selector) {
             $(this).on("mouseover", selector, function() {
                      if(!$(this).is(":ui-draggable"))
                            $(this).draggable({ containment: "parent" });
                      });
                      return this;
                }
          });
  
  $.fn.extend({
        resizableChildren: function(selector) {
             $(this).on("mouseover", selector, function() {
                      if(!$(this).is(":ui-resizable"))
                            $(this).resizable({ containment: "parent" });
                      });
                }
          });
  
  $(document).ready(function(){
        setImageProperty=function(imageSource){
              $(".block").draggableChildren(".blocks");
              $(".block").resizableChildren(".blocks");
              $(".block").append('&lt;img class="blocks" src='+imageSource+' /&gt;');
      }});
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.blocks 
      {
      display: inline-block;
      width: 30%;
      }
  
  .block 
      {
      width:50%;
      height : 50%;
      padding:10px;
      border:1px solid #C8C8C8;
      margin:0px;
      background-color:#F0F0F0;
      margin-left: auto;
      margin-right: auto;
      position : relative;
      overflow: hidden;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
      &lt;meta content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Upload Image&lt;/title&gt;
      &lt;script src="../js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="../js/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="../js/upload_common.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="../css/jquery-ui.css" /&gt; 
      &lt;link rel="stylesheet" href="../css/upload_common.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;br&gt;&lt;div class="block"&gt;&lt;/div&gt;
      &lt;center&gt;
      &lt;br&gt;
      &lt;input class="button" type="button" id="showExistingImg" value="Show Uploaded Images" /&gt;
      &lt;input id="style_Browse" type="button" value="Upload Images" class="button" /&gt;
      &lt;input id="btn_browse" type="file" onchange="loadname(this,'previewImg');" /&gt;
      &lt;div id="existingImges"&gt;
  
      &lt;br&gt;
      &lt;a class="block-add" href="javascript:void(0)" onclick="setImageProperty('../images/1.jpg')" &gt;&lt;img class="uploadImage" src="../images/1.jpg" /&gt;&lt;/a&gt;
       &lt;a class="block-add" href="javascript:void(0)" onclick="setImageProperty('../images/2.jpg')" &gt;&lt;img class="uploadImage" src="../images/2.jpg" /&gt;&lt;/a&gt;
       &lt;a class="block-add" href="javascript:void(0)" onclick="setImageProperty('../images/3.jpg')" &gt;&lt;img class="uploadImage" src="../images/3.jpg" /&gt;&lt;/a&gt;
       &lt;/center&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Problem is I can make the image either draggable or resizable. Not both. For instance, in the code above, the image is resizable, not draggable. Can anyone please guide me what I am doing wrong?</p>
  
  <p>Please find the attached fiddle : <a href="http://jsfiddle.net/8VY52/249/" rel="nofollow">http://jsfiddle.net/8VY52/249/</a></p>