| home / experts / dhtml / column6 |  
|
|
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.
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.
 | | | |
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.
By the end of this column we will have discussed:
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: http://www.webreference.com/dhtml/column6/
