How do I pan the contents of a div when the right mouse button is dragged?

Question

I need a cross browser way of capturing the right mouse click, preventing the default context menu and making it where when the user drags the mouse they can pan the contents of a div. This is largely similar to Google maps in that they will grip the contents and drag to see what they want.

No external libraries please.

I am already capturing the events, and know that this will prevent default actions:

  if (evt.preventDefault)
 {
        evt.preventDefault();
 }
    else
 {
        evt.returnValue = false;
 }

But this doesn't prevent the context menu AFAIK.

Edit: I really am unsure about how to prevent the context menu and what the best way to manipulate the scroll bars would be? examples would be great

Answer 1

So I'm using oncontextmenu="return false" which I know can be over-ridden by user preference but for those people they can use the menu bar options at the top of my app.

To handle the scrolling I am just modifying div.scrollLeft and div.scrollTop

Answer 2

This tutorial on scrollbar parallax scrolling might be of some use;

http://inner.geek.nz/javascript/parallax/