JavaScript Bible, Gold Edition part 144. This book will bring programmers and non-technical professionals, including casual programmers and scripters, painlessly up to speed on all aspects of mastering JavaScript. Key topics include programming fundamentals, JavaScript language elements and how to use them effectively, and how to easily and efficiently add powerful new functionality to HTML documents and Java applets. | 1278 Part V Putting JavaScript to Work Listing 48-1 An Element Dragging Behavior PUBLIC ATTACH EVENT onmousedown ONEVENT engage PUBLIC ATTACH EVENT onmousemove ONEVENT dragIt PUBLIC ATTACH EVENT onmouseup ONEVENT release PUBLIC ATTACH EVENT onmouseover ONEVENT setCursor PUBLIC ATTACH EVENT onmouseout ONEVENT release restoreCursor SCRIPT LANGUAGE JScript global declarations var offsetX 0 var offsetY 0 var selectedObj var oldZ oldCursor initialize drag action on mousedown function engage selectedObj element element null if selectedObj offsetX - offsetY - oldZ 10000 false move element on mousemove function dragIt if selectedObj - offsetX - offsetY true false restore state on mouseup function release if selectedObj oldZ selectedObj null make cursor look draggable on mouseover function setCursor oldCursor hand Chapter 48 Internet Explorer Behaviors 1279 restore cursor on mouseout function restoreCursor oldCursor SCRIPT Notice a subtlety in Listing 48-1 that is implied by the element-specific scope of a behavior. Two statements in the engage function need to reference scroll-related properties of the object. Because the only connection between the behavior and the document is via the element reference that reference is used along with the document property a property of every HTML element object in IE4 as shown in Chapter 15 . From there the body object and the required properties can be accessed. Listing 48-2 is a simple page that contains three elements that are associated with the behavior through a style sheet rule definition for the draggable class . The .
