CODEFETCH™
            Examples
Cache of code/GoogleMaps/step4.html from
http://media.pragprog.com/titles/ajax/code/ajax-code.tgz
Source code below from:
Pragmatic Ajax : A Web 2.0 Primer
By Justin Gehtland, Ben Galbraith, and Dion Almaer
Published 10 April, 2006
Average rating

      Powells     Alibris 

<!--
 ! Excerpted from "Pragmatic Ajax"
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/ajax for more book information.
-->
<html>
    <head>
        <title>Ajaxian Maps</title>
        <style type="text/css">
            h1 {
                font: 20pt sans-serif;
            }
            #outerDiv {
                height: 600px;
                width: 800px;
                border: 1px solid black;
                position: relative;
                overflow: hidden;
            }

            #innerDiv {
                position: relative;
                left: 0px;
                top: 0px;
            }
        </style>
        <script type="text/javascript">
            // START:dragstuff
            // used to control moving the map div
            var dragging = false;
            var top;
            var left;
            var dragStartTop;
            var dragStartLeft;

            function init() {
                // make inner div big enough to display the map
                setInnerDivSize('2000px', '1400px');

                // wire up the mouse listeners to do dragging
                var outerDiv = document.getElementById("outerDiv");
                outerDiv.onmousedown = startMove;
                outerDiv.onmousemove = processMove;
                outerDiv.onmouseup = stopMove;

                // necessary to enable dragging on IE
                outerDiv.ondragstart = function() { return false; }
            }

            function startMove(event) {
                // necessary for IE
                if (!event) event = window.event;

                dragStartLeft = event.clientX;
                dragStartTop = event.clientY;
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.cursor = "-moz-grab";

                top = stripPx(innerDiv.style.top);
                left = stripPx(innerDiv.style.left);

                dragging = true;
                return false;
            }

            function processMove(event) {
                if (!event) event = window.event;  // for IE
                var innerDiv = document.getElementById("innerDiv");
                if (dragging) {
                    innerDiv.style.top = top + (event.clientY - dragStartTop);
                    innerDiv.style.left = left + (event.clientX - dragStartLeft);
                }
            }

            function stopMove() {
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.cursor = "";
                dragging = false;
            }

            function stripPx(value) {
                if (value == "") return 0;
                return parseFloat(value.substring(0, value.length - 2));
            }
            // END:dragstuff
            function setInnerDivSize(width, height) {
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.width = width;
                innerDiv.style.height = height;
            }
        </script>
    </head>
    <body onload="init()">
        <p>
            <h1>Ajaxian Maps</h1>
        </p>
        <div id="outerDiv">
            <div id="innerDiv">
                The rain in Spain falls mainly in the plains.
            </div>
        </div>
    </body>
</html>