title: Panning Image Using Javascript in ASP.Net Page Overflows Div
body: <p>I have an ASP.Net page that contains a <code>&lt;div&gt;</code> with an <code>&lt;img&gt;</code> tag within. The image is large so the <code>&lt;div&gt;</code> is set with a size of 500x500 pixels with overflow set to scroll.</p>
  
  <p>I'm attempting to add image panning using a click and drag on the image. However, every time I begin dragging the image escapes the boundary of the  element and consumes the entire page.</p>
  
  <p>Here is example code that illustrates the problem:</p>
  
  <pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;div id="divInnerDiv" style="overflow:scroll; width:500px; height:500px; cursor:move;"&gt;
              &lt;img id="imgTheImage" src="Page0001.jpg" border="0" /&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
              document.onmousemove = mouseMove;
              document.onmouseup   = mouseUp;
  
              var dragObject  = null;
              var mouseOffset = null;
  
              function mouseCoords(ev){
                  if(ev.pageX || ev.pageY){
                      return {x:ev.pageX, y:ev.pageY};
                  }
                  return {
                      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                      y:ev.clientY + document.body.scrollTop  - document.body.clientTop
                  };
              }
  
              function getMouseOffset(target, ev){
                  ev = ev || window.event;
  
                  var docPos    = getPosition(target);
                  var mousePos  = mouseCoords(ev);
                  return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
              }
  
              function getPosition(e){
                  var left = 0;
                  var top  = 0;
  
                  while (e.offsetParent){
                      left += e.offsetLeft;
                      top  += e.offsetTop;
                      e     = e.offsetParent;
                  }
  
                  left += e.offsetLeft;
                  top  += e.offsetTop;
  
                  return {x:left, y:top};
              }
  
              function mouseMove(ev) {
                  ev           = ev || window.event;
                  var mousePos = mouseCoords(ev);
  
                  if(dragObject){
                      dragObject.style.position = 'absolute';
                      dragObject.style.top      = mousePos.y - mouseOffset.y;
                      dragObject.style.left     = mousePos.x - mouseOffset.x;
  
                      return false;
                  }
              }
              function mouseUp(){
                  dragObject = null;
              }
  
              function makeDraggable(item){
                  if(!item) return;
                  item.onmousedown = function(ev){
                      dragObject  = this;
                      mouseOffset = getMouseOffset(this, ev);
                      return false;
                  }
              }
  
              makeDraggable(document.getElementById("imgTheImage"));
          &lt;/script&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also note that this HTML works fine in a non-ASP.Net page.</p>
  
  <p>Is there something in the ASP.Net Javascript that is causing this issue? Does anyone have a suggestion for panning a JPEG within a <code>&lt;div&gt;</code> block that will work in ASP.Net? I have tried using the jQueryUI library but the result is the same.</p>