Drag & Drop in Explorer 4: Page Setup | WebReference

Drag & Drop in Explorer 4: Page Setup


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:

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.

Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column7/IEsetup.html

Justtechjobs.comFind a programming school near you

Online Campus Both