professional-javascript-13-SimulatedDragAndDropExample2.htm / htm
<html> <head> <title>Simulated Drag And Drop Example</title> <script type="text/javascript" src="eventutil.js"></script> <script type="text/javascript"> function handleMouseMove() { var oEvent = EventUtil.getEvent(); var oDiv = document.getElementById("div1"); oDiv.style.left = oEvent.clientX; oDiv.style.top = oEvent.clientY; } function handleMouseDown() { EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove); EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp); } function handleMouseUp() { EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove); EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp); } </script> <style type="text/css"> #div1 { background-color: red; height: 100px; width: 100px; position: absolute; } </style> </head> <body> <p>Try dragging the red square.</p> <p><div id="div1" onmousedown="handleMouseDown()"></div> </p> </body> </html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.