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:

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.

Produced by Peter Belesis and

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

Drag & Drop in Explorer 4: Page Setup

Drag & Drop in Explorer 4:readying your page

The Good News

The not-so-Bad News

Red Square Revisited

Find a programming school near you

Drag & Drop in Explorer 4:
readying your page