Drag & Drop in Explorer 4

Drag & Drop, Part II:
dragging positioned elements in Explorer 4

This tutorial can be appreciated by users of any browser, any version. The in-line examples, of course, will only work in Explorer 4. The drag examples work in both Explorer 4 and Navigator 4. The code discussed is specific to Explorer. The code actually used is the cross-browser version.

The present column is a continuation of column 6, Drag & Drop Part I, Navigator 4. We will discuss how to drag positioned elements in Explorer 4, and then combine the two parts into a cross-browser script.

Please refer to Part I for an introduction to drag & drop concepts, and a script for achieving this effect in Netscape Navigator 4. Part I has been revised and the script revamped to allow for easier cross-browser compatibility.

Square Dance, the sequel

Our squares are back! This time they can be dragged in Explorer as well. As before, grab and move them around with your mouse; partially hide a square and then select the hidden one to move; pass them over the form button; reset them to the original position by pressing the button.

Behavior Differences

Essentially there is little difference, at least for the user, in element dragging between Explorer and Navigator. You may have noticed, however, that, unlike Navigator, Explorer allows positioned elements to hide form elements. The button above can be hidden by the squares. Another difference is that the text in the squares was not highlighted, that is, it was not selected if you chanced to grab the square by the text part. And finally we signalled to the user that an element was draggable by changing the cursor shape.

In This Column

We will discuss:

• setting up the page and elements for dragging,
• identifying the draggable element and page position when mousedown fires,
• moving the element and ending the drag,
• a unique Explorer event handler: onSelectStart
• changing the cursor shape.
• combining NN and IE script into a cross-browser version.

First, let's tell our page to ready itself for dragging.

Produced by Peter Belesis and

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

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