CODEFETCH™
            Examples
Cache of chapter16/dragdrop.htm from
http://www.wiley.co.uk/koch/supp/jscode.zip
Source code below from:
JavaScript: A Programmer's Companion from Basics through DHTML
By Stefan Koch and Stefan Koch
Published 11 November, 2002
Average rating

      Powells     Alibris 

<html>
<head>
<title>Drag & Drop</title>
<script language="JavaScript">

var isNav4 = false;
var isW3C = false;
var isIE = false;

var dx = 0, dy = 0;
var objList = new Array();
var current = null;
var zIndexTop = 10;

function init() {
    // Browser check
    if (navigator.appName.indexOf("Netscape") != -1) {
        if (parseInt(navigator.appVersion) == 4) {
          // Netscape Communicator 4.x
          isNav4 = true;
        } else if (parseInt(navigator.appVersion) >= 5) {
          // Netscape 6 or Mozilla
          isW3C = true;
        }
    } else {
        if ((parseInt(navigator.appVersion) >= 4) &&
          (navigator.appName.indexOf("Microsoft")!=-1)) {
          // MSIE 4.x or higher
          isIE = true;
        }

        if (navigator.userAgent.indexOf("Opera 5")!=-1) {
          // Opera 5.x - is treated like MSIE
          isIE = true;
        }
    }

    // Setting the objects
    createList("image1", "image2", "image3");

    // Event Capturing
    if ((isNav4) || (isW3C)) {
      document.captureEvents(Event.MOUSEDOWN |
            Event.MOUSEUP);
    }

    document.onmousedown = startDrag;
    document.onmouseup = endDrag;
}

function createList() {
  for (var i = 0; i < createList.arguments.length; i++) {
    if (isNav4) {
        objList[i] =
            document.layers[createList.arguments[i]];
    }
  }
}

function startDrag(e) {
    var found = false;
    var i = objList.length;

    if (isNav4) {
        var zIndexFound = 0;
        var found2 = 0;

        while ((i > 0)) {
            i--;
            var obj = objList[i];
            // Check which object was clicked on
            if ((e.pageX > obj.left) &&
                (e.pageX < obj.left + obj.clip.width) &&
                (e.pageY > obj.top) &&
                (e.pageY < obj.top + obj.clip.height)) {

                if (obj.zIndex > zIndexFound) {
                    found = true;
                    found2 = i;
                    zIndexFound = obj.zIndex;
                }
            }
        }
        if (found) {
            current = objList[found2];

            dx = e.pageX - current.left;
            dy = e.pageY - current.top;

            // Set object to top
            zIndexTop++;
            current.zIndex = zIndexTop;

            // Event capturing
            document.captureEvents(Event.MOUSEMOVE);
            document.onmousemove = drag;
            return false;
        }
    }

    if (isW3C) {
        var obj = e.target;
        if  ((obj.parentNode.id != null) &&
            (obj.parentNode.id.indexOf("image") != -1)) {
            current = obj.parentNode.style;

            dx = e.clientX - parseInt(current.left);
            dy = e.clientY - parseInt(current.top);

            // Set object to top
            zIndexTop++;
            current.zIndex = zIndexTop;

            document.captureEvents(Event.MOUSEMOVE);
            document.onmousemove = drag;
            return false;
        }
    }

    if (isIE) {
        var obj = window.event.srcElement;
        if ((obj.parentElement != null) &&
         (obj.parentElement.id.indexOf("image") != -1)) {
         current = obj.parentElement.style;

         dx = window.event.clientX - current.pixelLeft;
         dy = window.event.clientY - current.pixelTop;

         // Set object to top
         zIndexTop++;
         current.zIndex = zIndexTop;

         document.onmousemove = drag;
         return false;
        }
    }

    // User has not clicked on an object
    current = null;
    return false;
}

function drag(e) {
    if (current != null) {
        if (isNav4) {
            current.top = e.pageY - dy;
            current.left = e.pageX - dx;
        }
        if (isW3C) {
            current.top = parseInt(e.clientY) - dy;
            current.left = parseInt(e.clientX) - dx;
        }
        if (isIE) {
            current.pixelTop = window.event.clientY - dy;
            current.pixelLeft = window.event.clientX - dx;
        }
    }

    return false;
}

function endDrag(e) {
    if ((isNav4) || (isW3C)) {
      document.releaseEvents(Event.MOUSEMOVE);
    }
    document.onmousemove = null;
    current = null;

    return false;
}

</script>
</head>
<body onload="init()">

<div id="image1" style="position:absolute; left:50px;
    top:100px; width:120px; z-index:1;"><img name="obj1"
    src="sphere.gif" width="120" height="118"
    border="0"></div>

<div id="image2" style="position:absolute; left:70px;
    top:120px; width:115px; z-index:2;"><img name="obj2"
    src="cube.gif" width="115" height="145"
    border="0"></div>

<div id="image3" style="position:absolute; left:100px;
    top:150px; width:140px; z-index:3;"><img name="obj3"
    src="cyl.gif" width="140" height="121"
    border="0"></div>

</body>
</html>