title: Resizing div top left corner using jquery
body: <p>I have a div which I want to resize from all sides and corners, i.e. nw, n, ne, e, w, sw, s, se. I have tried jquery ui's resizable plugin but in my code that is not working. I have removed complexity from my code and placed it in a very basic fiddle.</p>
  
  <p>I have tried to resize only north-west corner of a div and put that logic in fiddle. Logic seems correct to me but mouse interaction is working in a weird way.</p>
  
  <p>Can you guys tell me what am I doing wrong here? If I get it correct for top left corner I can manage for the remaining ones. Thanks.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="box"&gt;
      &lt;div id="nw"&gt;&lt;/div&gt;
      &lt;div id="n"&gt;&lt;/div&gt;
      &lt;div id="ne"&gt;&lt;/div&gt;
      &lt;div id="w"&gt;&lt;/div&gt;
      &lt;div id="e"&gt;&lt;/div&gt;
      &lt;div id="sw"&gt;&lt;/div&gt;
      &lt;div id="s"&gt;&lt;/div&gt;
      &lt;div id="se"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;p class="one"&gt;&lt;/p&gt;
  &lt;p class="two"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#box{border:1px solid #000;width:100px;height:100px;background-color:red;position:absolute;top:100px;left:100px}
  #box &gt; div{height:10px;width:10px;background-color:#000;position:absolute}
  #nw{top:-5px;left:-5px;cursor:nw-resize}
  #n{top:-5px;left:45px;cursor:n-resize}
  #ne{top:-5px;right:-5px;cursor:ne-resize}
  #w{top:45px;left:-5px;cursor:w-resize}
  #e{top:45px;right:-5px;cursor:e-resize}
  #sw{bottom:-5px;left:-5px;cursor:sw-resize}
  #s{bottom:-5px;left:45px;cursor:s-resize}
  #se{bottom:-5px;right:-5px;cursor:se-resize}
  p{margin-top:250px;font-size:8px}
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function(){
      var mousepress = false;
      $("#box &gt; div").mousedown(function(e){
          mousepress = true;
      });
  
      $("#box &gt; div").mousemove(function(e){
          if(mousepress) {
              var boxX = $("#box").position().left;
              var boxY = $("#box").position().top;
              var boxW = $("#box").width();
              var boxH = $("#box").height();
  
              var x = boxX - e.pageX;//$(this).position().left;
              var y = boxY - e.pageY;//$(this).position().top;
              $("p.two").append("x: "+x+"&lt;br /&gt;");
              $(this).css({
                  "top":y+"px",
                  "left":x+"px"
              });
              $("#box").css({
                  "top":(boxY+y-5)+"px",
                  "left":(boxX+x-5)+"px",
                  "width":(boxW+x)+"px",
                  "height":(boxH+y)+"px",
              });
  
          }
      });
  
      $("#box &gt; div").mouseup(function(){
          mousepress = false;
      });
  });
  </code></pre>
  
  <p>**JSFIDDLE: **<a href="http://jsfiddle.net/ashwyn/v8qoLj76/2/" rel="nofollow">http://jsfiddle.net/ashwyn/v8qoLj76/2/</a></p>