| home / experts / dhtml / column7 |   
|
Drag & Drop in Explorer 4:
readying your page
The Good News
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:
- Since any element, with any tag can be positioned, all elements are draggable without the need for an enclosing positionable tag. For example, an image can be re-positioned without an enclosing <DIV> or <SPAN>.
- An author can create custom HTML attributes and include them in regular tags. For example, we can create the attribute DRAG and mark an element as draggable with DRAG=TRUE:
<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.The not-so-Bad News
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.
Red Square Revisited
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 end our script by assigning the three functions to the three event handlers of the document object. Unlike Navigator, we do not have to specifically capture the events.
We are now ready to flesh out our functions.
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/IEsetup.html
