Turning a DIV into a click-and-drag viewport

Question

Does somebody know an unobtrusive, Prototype or no framework based way to turn a DIV with big content (e.g. a map) into a clickable and draggable "map" container with fixed dimensions, very much like Google Maps?

I want to display HTML chunks in a large input form. Those chunks can exceed the space available (Each chunk can have a viewport of about 150x300 Pixels). A click-and-drag solution would be perfect to move through them. I could use overflow:auto of course but that is not a convenient method to move around in this case.

Answer 1

Are you after something like jQuery portlets?

Answer 2

I make one for a touch-screen kiosk. It involves moving a large map based on someone dragging the viewable area on a mini-map, with various zoom levels.

Take a look:

http://www.mintohomes.com/morgansgrantkiosk/SitePlan/Default.asp

The JavaScript source is in the page.

Answer 3

Have a look at the following:

http://www.switchonthecode.com/tutorials/javascript-tutorial-draggable-view-in-a-container

It may point you in the right direction at least