Drag & Drop in Navigator 4: The Complete Code | WebReference

Drag & Drop in Navigator 4: The Complete Code

Logo

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


Compatibility Notes

The code is Navigator 4-specific. No browser checks are performed. Explorer 4 recognizes the LANGUAGE = "JavaScript1.2" attribute, reads the code and attempts to execute it. If run in Explorer, errors will be generated. Next column, when we go cross-browser, we'll add the necessary checks.

Code for One Element

Identifiers to be inserted marked in blue italics.

...
<SCRIPT LANGUAGE="JavaScript1.2">
&lt!--
    function grabEl(e) {
        currentX = e.pageX;
        currentY = e.pageY;
        captureEvents(Event.MOUSEMOVE);
        onmousemove = moveEl;
    }
    function moveEl(e) {
        distanceX = (e.pageX - currentX);
        distanceY = (e.pageY - currentY);
        currentX = e.pageX;
        currentY = e.pageY;
        document.elementName.moveBy(distanceX,distanceY);
    }
    function dropEl() {
        releaseEvents(Event.MOUSEMOVE);
    }
    document.elementName.document.onmousedown = grabEl;
    document.elementName.document.onmouseup = dropEl;
//-->
</SCRIPT>
</BODY>
&lt/HTML>

Code for Many Elements

Identifiers to be inserted marked in blue italics.

...
<SCRIPT LANGUAGE="JavaScript1.2">
&lt!--
    currentX = currentY = 0;
    whichEl = null;
    function grabEl(e) {
        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) {
            whichEl.moveAbove(activeEl)
            activeEl = whichEl;
        }
    
        currentX = e.pageX;
        currentY = e.pageY;
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = moveEl;
    }
    function moveEl(e) {
        distanceX = (e.pageX - currentX);
        distanceY = (e.pageY - currentY);
        currentX = e.pageX;
        currentY = e.pageY;
        whichEl.moveBy(distanceX,distanceY);
    }
    function dropEl() {
        document.releaseEvents(Event.MOUSEMOVE);
        whichEl = null;
    }
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
    document.onmousedown = grabEl;
    document.onmouseup = dropEl;
    activeEl = document.elementName;
//-->
</SCRIPT>
</BODY>
&lt/HTML>

Next Time...on Dynamic HTML Lab

In our next column, we will return to the same topic with Explorer and cross-browser versions.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Oct. 08, 1997
Revised: July 21, 1998

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