Drag & Drop in Navigator 4: Component Events | WebReference

Drag & Drop in Navigator 4: Component Events


Drag & Drop in Navigator 4:
drag: the sum of component parts

Every drag event is composed of three separate, but related events:

onMouseDown and onMouseUp have been discussed in great detail in column1. There, they were applied to links. More recently, in column3, we discussed capturing events and calling a function when an event handler fired. When we want to capture the mousedown event for a positioned element, we do it the second way. That is, we set it in the script:

elementName.document.onmousedown = functionName

In Navigator, onmousedown is an event of the document object. Since every positioned element has a document property, in turn itself an object, the event handler is applied to document.elementName.document. This script should appear after the element has been created, so we insert it at the end of our page.

If we wanted to call function grabEl when the user pressed the mouse button over an element named elOne, and function dropEl, when the mouse button was released, we would need the following code. We've included the complete HTML for our red square example (below) for clarity. Only the top and left properties are, of course, arbitrary:

    <HTML> <HEAD> <STYLE TYPE="text/css"> <!-- #elOne { position: absolute; left: 100; top: 100; layer-background-color: red; color: white; font-weight: bold; text-align: center; width: 100; clip: rect(0 100 100 0) } --> </STYLE> </HEAD> <BODY> <DIV ID="elOne">Drag Me!</DIV> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- function grabEl() { } function dropEl() { } document.elOne.document.onmousedown = grabEl; document.elOne.document.onmouseup = dropEl; //--> </SCRIPT> </BODY> </HTML>

We will fill in the functions as we go. Notice the use of a Netscape-specific CSS property: layer-background-color. Navigator has a documented bug with the CSS standards-compliant background-color property. Use the proprietary property whenever you need a solid background color. It is harmless, as Explorer will ignore it.

The eventhandlers will now call the appropriate functions, passing them the newly-generated event object as an argument. As previously discussed, in column 3, if we need to use the object in our function, it must be identified as an argument. Any name will do; we will use the Netscape-standard e, whenever we need to reference it.

Once in grabEl, we must concern ourselves with mouse movement. We must capture all mouse movement and act accordingly. Our concern is any mouse movement, so for brevity we can have the window object capture the moves: window.captureEvents(Event.MOUSEMOVE) and call another function, moveEl, to process the moves: window.onmousemove = moveEl. Everytime a move is sensed, moveEl will be called. The only way to stop it is in the dropEl function, which releases the repetative mouse move capture. Our functions now read (omitting the redundant window object):

    function grabEl() {
captureEvents(Event.MOUSEMOVE); onmousemove = moveEl; } function moveEl() { } function dropEl() { releaseEvents(Event.MOUSEMOVE); }

The final step is to actually move the element.

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/dragComp.html

Justtechjobs.comFind a programming school near you

Online Campus Both