Drag & Drop in Navigator 4: Advanced Options | WebReference

Drag & Drop in Navigator 4: Advanced Options


Drag & Drop in Navigator 4:
Coding Options

1 - Specify top-most element in the array

Our routine has two instances of author input:

We can easily reduce input to the array only, by standardizing the position in the array of the top-most element. That is, we could always place the top-most element first in the array. Then our code would be:
    arDraggable = new Array(
elementNameAsString1(on top), elementNameAsString2, elementNameAsString3, ... elementNameAsStringLast ); activeEl = eval("document." + arDraggable[0]) for (i=0; i<arDraggable.length; i++) { whichDoc = eval("document." + arDraggable[i] + ".document"); whichDoc.moniker = arDraggable[i]; whichDoc.onmousedown = grabEl; }

2 - No array, just specific IDs

We can do away with our array altogether, by identifying the draggable elements through their ID attribute. For example, the prefix elD could be used. The element to be top-most by default could have "TOP" in its ID somewhere. Then all we would need in our script are the three functions and the routine below:

    <DIV ID="elDone"></DIV>
// draggable <DIV ID="elDtwo></DIV> // draggable <DIV ID="elDthreeTOP"></DIV> // draggable and on top <DIV ID="elFour></DIV> // not draggable ... three functions ... for (i=0; i<document.layers.length; i++) { // go through all layers/pos. elements (same array in NS) temp = document.layers[i].id; // grab its ID if (temp.indexOf("TOP") != -1) { activeEl = document.layers[i] };// if "TOP" is in ID, this is top element if (temp.indexOf("elD") != -1) { // if "elD" is in ID... whichDoc = eval("document." + temp + ".document"); // do as before whichDoc.moniker = temp; whichDoc.onmousedown = grabEl; } }

3 - External file

If we use the second option above, with the specific IDs, then we could add draggability to elements in our pages by:

    ... page ... <SCRIPT LANGUAGE="JavaScript1.2" SRC="dragCode.js"></SCRIPT> </BODY> </HTML>

Next Time...on Dynamic HTML Lab

Script modifications never end. So before we get completely carried away let's stop here and bid farewell until next time when we return to the same topic with Explorer and cross-browser versions.

Produced by Peter Belesis and

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

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