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.