| home / experts / dhtml / column7 |   
|
|
The extensive Explorer Document Object Model, and its reflection in scripting, provides us with two huge differences over Navigator as far as element dragging is concerned:
<IMG NAME="imDragMe" SRC="foobar.gif" WIDTH=100 HEIGHT=100 DRAG=TRUE>Using the new getAttribute() method, the DRAG value can be retrieved and the script can execute accordingly.
Our ultimate goal in this column is to write an Explorer-specific script that can easily be adapted to a cross-browser version. We must, therefore, concentrate on an approach similar to that of Navigator. Although our final script may have conditional statements, our page HTML should be identical. Powerful, but proprietary, HTML-affecting properties will be avoided.
Like the Navigator example, we will identify all elements to be dragged with "DRAG" in their ID.
<HTML> <HEAD> <STYLE TYPE="text/css"> <!-- #elDRAGOne {
/* "DRAG" anywhere in name makes it draggable */ position: absolute; left: 100; top: 100; /* fake values, for example only */ background-color: red; /* standard CSS for Explorer */ layer-background-color: red; /* proprietary CSS for Navigator */ color: white; font-weight: bold; text-align: center; width: 100; clip: rect(0 100 100 0) } --> </STYLE> </HEAD> <BODY> <DIV ID="elDRAGOne">Drag Me!</DIV> <!-- place element in HTML flow --> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- currentX = currentY = 0; // initialize global position-tracking variables whichEl = null; // initialize global element-being-dragged variable function grabEl() { // function for onmousedown } function moveEl() { // function for onmousemove } function dropEl() { // function for onmouseup } document.onmousedown = grabEl; document.onmousemove = moveEl; document.onmouseup = dropEl; //--> </SCRIPT> </BODY> </HTML>
 |
We are now ready to flesh out our functions.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 10/22/97
Revised: 10/22/97
URL: http://www.webreference.com/dhtml/column7/IEsetup.html
