Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
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 event.srcElement element null if selectedObj offsetX event.offsetX - element.document.body.scrollLeft offsetY event.offsetY - element.document.body.scrollTop oldZ element.runtimeStyle.zIndex element.style.zIndex 10000 event.returnValue false move element on mousemove function dragIt if selectedObj selectedObj.style.pixelLeft event.clientX - offsetX selectedObj.style.pixelTop event.clientY - offsetY event.cancelBubble true event.returnValue false restore state on mouseup function release if selectedObj selectedObj.style.zIndex oldZ selectedObj null make cursor look draggable on mouseover function setCursor oldCursor element.runtimeStyle.cursor element.style.cursor hand Chapter 48 Internet Explorer Behaviors 1279 restore cursor on mouseout function restoreCursor element.style.cursor 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 document.body 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 drag.htc behavior through a style sheet rule definition for the draggable class . The .
