Drag & Drop in Explorer 4: The Complete Code

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">
&lt!--
    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>
&lt/HTML>

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

Produced by Peter Belesis and

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

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