title: Panning DIV element around using javascript
body: <p>I am trying to have a div in a container which when the user clicks and drags somewhere in the document area, the .room element pans around inside the .viewport element by holding down the middle click button.</p>
  
  <p>Here is the issue: (Hold right click for this one, middle click didn't work for some reason)
  <a href="http://jsfiddle.net/JeZj5/2/" rel="noreferrer">http://jsfiddle.net/JeZj5/2/</a></p>
  
  <p>JS</p>
  
  <pre><code>var mouseX = 0;
  var mouseY = 0;
  var scale = 1.0;
  
  $(document).mousemove(function (e) {
  
      var offset = $('.room').offset();
  
      //relative mouse x,y
      mouseX = parseFloat((e.pageX - offset.left) / scale, 2);
      mouseY = parseFloat((e.pageY - offset.top) / scale, 2);
  
      //absolute mouse x,y
      mouseXRaw = e.pageX;
      mouseYRaw = e.pageY;
  
      $(".room").html(mouseX + ', ' + mouseY + '&lt;br /&gt;Right click document and pan');
  
      switch (e.which) {
          case 3:
              $('.room').css({
                  left: mouseX,
                  top: mouseY
              });
              break;
      }
      return true;
  });
  
  $(document).on('contextmenu', function () {
      return false;
  });
  </code></pre>