Dynamic HTML: The Definitive Reference

Dragging Elements

The final example in this chapter, Example 6.4, demonstrates how event capturing and event bubbling can work together to let document-level event handlers control the dragging of elements on the screen. Because Navigator does not support events for elements that are not part of the document object hierarchy, it makes perfect sense to have the document capture all pertinent events and process them. While IE 4 could have event handlers assigned to each of the elements, that would require more effort than is necessary.

All the dragging event handlers are assigned as properties in an init() function invoked by the onLoad event handler. The only platform-specific process taking place here involves setting the document.captureEvents() method to grab all mouse down and mouse move events that come in from Navigator 4.

The draggable elements in this example are two absolute-positioned DIV elements that contain IMGelements. The user can click on either image and drag that image around. While it is a simple operation for the user, the application must do a fair amount of work to figure out which element has been clicked and then track the location of the element in sync with the mouse. Stacking order also comes into consideration because you want a selected element to be atop all its peers as the user drags it around the screen.

Determining which element has been clicked requires a lot more work in Navigator than in IE. Assuming that all targeted elements are sibling ...