Drag & Drop in Navigator 4

Drag & Drop, Part I:
dragging positioned elements in Navigator 4

This tutorial can be appreciated by users of any browser, any version. The in-line examples, of course, will only work in Navigator 4. Next column, we will discuss the Explorer version of the code and create a cross-browser script.

By now we've all seen click me!, drag me! layers and positioned elements on the browser demo sites. Elements that can be dragged by the user will be appearing not only in fun, game sites, but e-commerce sites as well. Drag the item you wish to purchase into the shopping basket!

In this first of a two-column mini-series, we will discuss basic drag & drop concepts and how to achieve this effect in Netscape Navigator 4. Next column we will do the same for Internet Explorer 4 and combine the two into a cross-browser version.

Kind of a Drag

Grab any of the four colored squares below with your mouse; move them around the page; 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.

Limitation, a.k.a. Bug, Note

You may have noticed that you cannot pass the element over a form element (the button). This is a well-documented limitation. Forms, applets and plugins float above positioned elements.

This Column

By the end of this column we will have discussed:

• the component parts of a drag event,
• dragging a single element,
• marking multiple elements as draggable,
• moving the dragged element to the top of the element stack.

First, let's look at what a drag really means.

Produced by Peter Belesis and

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

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