home / experts / dhtml / column7

Drag & Drop in Explorer 4:
SPECIAL EDITION; the director's cut

Compatibility Notes

The code is Explorer 4-specific. No browser checks are performed. Errors will be generated if run in older versions of Explorer. Our next page discusses a cross-browser version.

Keep in Mind

• All elements that are draggable must have the position property defined in the CSS declaration, whether in the STYLE tag or with the STYLE= attribute.
• All draggable elements must have the identifier "DRAG" in their ID, or whatever you wish it to be. Change the script accordingly.
• You must specify which element is to be ontop by assigning that element to the activeEl variable.

<SCRIPT LANGUAGE="JScript">
<!--

    currentX = currentY = 0;
    whichEl = null;

    function grabEl() {
        whichEl = event.srcElement;

        while (whichEl.id.indexOf("DRAG") == -1) {
            whichEl = whichEl.parentElement;
            if (whichEl == null) { return }
        }

        if (whichEl != activeEl) {
            whichEl.style.zIndex = activeEl.style.zIndex + 1;
            activeEl = whichEl;
        }

        whichEl.style.pixelLeft = whichEl.offsetLeft;
        whichEl.style.pixelTop = whichEl.offsetTop;

        currentX = (event.clientX + document.body.scrollLeft);
        currentY = (event.clientY + document.body.scrollTop); 
    }

    function moveEl() {
        if (whichEl == null) { return };

        newX = (event.clientX + document.body.scrollLeft);
        newY = (event.clientY + document.body.scrollTop);
        distanceX = (newX - currentX);
        distanceY = (newY - currentY);
        currentX = newX;
        currentY = newY;

        whichEl.style.pixelLeft += distanceX;
        whichEl.style.pixelTop += distanceY;
        event.returnValue = false;
    }

    function checkEl() {
        if (whichEl!=null) { return false }
    }

    function dropEl() {
        whichEl = null;
    }

    function cursEl() {
        if (event.srcElement.id.indexOf("DRAG") != -1) {
            event.srcElement.style.cursor = "move"
        }
    }

    document.onmousedown = grabEl;
    document.onmousemove = moveEl;
    document.onmouseup = dropEl;
    document.onmouseover = cursEl;
    document.onselectstart = checkEl;

    activeEl = elementName;

//-->
</SCRIPT>
</BODY>
</HTML>

Now we can take the Navigator code from last column and combine it with the above to create a cross-browser version.

Comments are welcome
Produced by Peter Belesis and Copyright © 1997 Athenia Associates
Created: 10/22/97
Revised: 10/22/97

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