title: overflow in div for image drag and drop
body: <p>I am dragging an image onto a <strong>div</strong> using javascript and html5. </p>
  
  <p>And later doing the resizing of the image .  </p>
  
  <p>But the issue is even if I make use of the overflow:hidden and any of the properties of overflow, the image is coming out of the div . How to make it be inside the div itself?</p>
  
  <pre><code>&lt;script&gt;
  
  
  
  
  function allowDrop(ev) {
  
          ev.preventDefault();
  
      }
  
      function drag(ev) {
  
          ev.dataTransfer.setData("application/json", JSON.stringify([ev.target.id,(ev.offsetX || ev.clientX - $(ev.target).offset().left),(ev.offsetY || ev.clientY - $(ev.target).offset().top)]));
  
      }
  
      function drop(ev) {
  
          ev.preventDefault();
  
          var data = JSON.parse(ev.dataTransfer.getData("application/json"));
  
          ev.target.appendChild(document.getElementById(data[0]));
  
          //window.alert( ev.clientX + ',' + ev.clientY);
  
          document.getElementById("img").style.left = ev.clientX - data[1] + 'px';
  
          document.getElementById("img").style.top = ev.clientY - data[2] + 'px';
  
           document.getElementById("img").addEventListener('mousedown', initDrag, false);
  
          return false;   
  
       }
  
       var startX, startY, startWidth, startHeight;
  
          function initDrag(e) {  
  
              startX = e.clientX;
  
              startY = e.clientY; 
  
               startWidth = parseInt(document.defaultView.getComputedStyle(document.getElementById("img")).width, 10);
  
              startHeight = parseInt(document.defaultView.getComputedStyle(document.getElementById("img")).height, 10);
  
              document.documentElement.addEventListener('mousemove', doDrag, false);
  
              document.documentElement.addEventListener('mouseup', stopDrag, false);
  
          }
  
          function doDrag(e) { 
  
           document.getElementById("drag2").style.width = (startWidth + e.clientX - startX) + 'px';
  
              document.getElementById("drag2").style.height = (startHeight + e.clientY - startY) + 'px';
  
  
           }
  
          function stopDrag(e) {
  
              document.documentElement.removeEventListener('mousemove', doDrag, false);
  
               document.documentElement.removeEventListener('mouseup', stopDrag, false);
  
          }
  &lt;/script&gt;
  
  &lt;body&gt;
  
  
  
  &lt;div id="divid" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  
  
  
      &lt;/div&gt;
  
       &lt;img src="test.jpg" id="img" draggable="true" ondragstart="drag(event)"&gt;&lt;/img&gt;
  
  &lt;/body&gt;
  
  &lt;style&gt;
  
  #divid {width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;overflow:auto;}
  
      #img {width:50px;height:50px;padding:10px;position: absolute;}
  &lt;/style&gt;
  </code></pre>