title: Pan a div in javascript/jquery
body: <p>I'm somehow struggling to get this fixed. I'm trying to pan a DIV using in jquery. The logic is pretty simple. On mouseDown, I get X &amp; Y and subtracting X &amp; Y on mouseMove to pan the div.</p>
  
  <p>But somehow the div is moving a lot faster and Could not understand the reason behind it.</p>
  
  <pre><code>$('div').on('mousedown', function(e) {
      self.panStartX = e.pageX;
      self.panStartY = e.pageY;
      self.mouseDown = true;
  }).on('mousemove', function(e) {
      if (self.mouseDown) {
          var pageTop = parseInt($(this).css('top'), false) || 0;
          var pageLeft = parseInt($(this).css('left'), false) || 0;
          self.panEndX = e.pageX;
          self.panEndY = e.pageY;
  
          if (self.panStartY &gt; self.panEndY) {
              self.panTop = self.panEndY - self.panStartY;
  
              pageTop+= self.panTop;
              $(this).css({ top: pageTop });
          } else {
              // Down
              self.panTop = self.panStartY - self.panEndY;
  
              pageTop-= self.panTop;
              if (pageTop &gt; 42) pageTop = 42;
  
              $(this).css({ top: pageTop });
          }
      }
  }).on('mouseup', function(e) {
      self.mouseDown = false;
  });
  </code></pre>
  
  <p>Here is a demo: <a href="http://jsfiddle.net/hvUVy/" rel="nofollow">http://jsfiddle.net/hvUVy/</a> </p>