Search code examples
javascriptcssprototypejs

Turning a DIV into a click-and-drag viewport

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.

Solution

  • 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