Drag & Drop: A Cross-Browser Version

Drag & Drop in Navigator & Explorer 4:
a cross-browser script

Notes

• The Explorer code discussed in the present article has been intertwined with the Navigator code from our previous column.
• If this script is used in-page, the LANGUAGE= attribute value can be changed to LANGUAGE="JavaScript1.2" and the checks for ver4 browsers omitted, as only NN4 and IE4 recognize this value.
• See below for instructions on using the script in an external file
• Remember that the topmost element name (activeEl)must be set manually

<SCRIPT LANGUAGE="JavaScript">
&lt!--
    IE4 = (document.all) ? 1 : 0;
    NS4 = (document.layers) ? 1 : 0;
    ver4 = (IE4 || NS4) ? 1 : 0;
    currentX = currentY = 0;
    whichEl = null;
    
    function grabEl(e) {
        if (IE4) {
            whichEl = event.srcElement;
    
            while (whichEl.id.indexOf("DRAG") == -1) {
                whichEl = whichEl.parentElement;
                if (whichEl == null) { return }
            }
        }
        else {
            mouseX = e.pageX;
            mouseY = e.pageY;
    
            for ( i=0; i<document.layers.length; i++ ) {
            tempLayer = document.layers[i];
                if ( tempLayer.id.indexOf("DRAG") == -1 ) { continue }
                if ( (mouseX > tempLayer.left) && (mouseX < (tempLayer.left + tempLayer.clip.width)) 
                     && (mouseY > tempLayer.top) && (mouseY < (tempLayer.top + tempLayer.clip.height)) ) {
                    whichEl = tempLayer;
                }
            } 
    
            if (whichEl == null) { return}
        }
    
        if (whichEl != activeEl) {
            if (IE4) { whichEl.style.zIndex = activeEl.style.zIndex + 1 }
                else { whichEl.moveAbove(activeEl) };
                activeEl = whichEl;
        }
    
        if (IE4) {
            whichEl.style.pixelLeft = whichEl.offsetLeft;
            whichEl.style.pixelTop = whichEl.offsetTop;
    
            currentX = (event.clientX + document.body.scrollLeft);
            currentY = (event.clientY + document.body.scrollTop); 
    
        }
        else {
            currentX = e.pageX;
            currentY = e.pageY;
    
            document.captureEvents(Event.MOUSEMOVE);
            document.onmousemove = moveEl;
        }
    }
    
    function moveEl(e) {
        if (whichEl == null) { return };
    
        if (IE4) {
            newX = (event.clientX + document.body.scrollLeft);
            newY = (event.clientY + document.body.scrollTop);
        }
        else {
            newX = e.pageX;
            newY = e.pageY;
        }
        distanceX = (newX - currentX);
        distanceY = (newY - currentY);
        currentX = newX;
        currentY = newY;
    
        if (IE4) {
            whichEl.style.pixelLeft += distanceX;
            whichEl.style.pixelTop += distanceY;
            event.returnValue = false;
        }
        else { whichEl.moveBy(distanceX,distanceY) }
    }
    
    function checkEl() {
        if (whichEl!=null) { return false }
    }
    
    function dropEl() {
        if (NS4) { document.releaseEvents(Event.MOUSEMOVE) }
        whichEl = null;
    }
    
    function cursEl() {
        if (event.srcElement.id.indexOf("DRAG") != -1) {
            event.srcElement.style.cursor = "move"
        }
    }
    
    if (ver4) {
        if (NS4) {
            document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
            activeEl = document.elementName;
        }
        else {
            document.onmousemove = moveEl;
            document.onselectstart = checkEl;
            document.onmouseover = cursEl;
            activeEl = document.all.elementName;
        }
    
        document.onmousedown = grabEl;
        document.onmouseup = dropEl;
    }
//-->
</SCRIPT>
</BODY>
&lt/HTML>

Using the Script in a Universal External File

• Make sure browser checks are done as Navigator 3 will attempt to read it.
• Omit the lines that set the activeEl value
• Set the activeEl value in-page for each page

<SCRIPT LANGUAGE="JavaScript" SRC="dragDrop.js></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
&lt!--
    activeEl = (IE4) ? document.all.elementName : document.elementName;
//-->
</SCRIPT>
</BODY>
&lt/HTML>

The external version can be downloaded as a JavaScript file or a zipped file. Happy dragging and dropping!

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 10/22/97
Revised: 10/22/97

URL: http://www.webreference.com/dhtml/column7/crossCode.html