1. CS 142 Lecture Notes: FormsSlide 1 Draggable Rectangle #div1 { position: absolute; }... <div id="div1" onmousedown="mouseDown(event);" onmousemove="mouseMove(event);" onmouseup="mouseUp(event);">Drag Me!

2. CS 142 Lecture Notes: FormsSlide 2 Event Handlers isMouseDown = false; function mouseDown(event) { mouseX = event.clientX; mouseY = event.clientY; isMouseDown = true; } function mouseMove(event) { if (!isMouseDown) { return; } element = document.getElementById("div1"); element.style.left = (element.offsetLeft + (event.clientX - mouseX)) + "px"; element.style.top = (element.offsetTop + (event.clientY - mouseY)) + "px"; mouseX = event.clientX; mouseY = event.clientY; } function mouseUp(event) { isMouseDown = false; }

3. CS 142 Lecture Notes: FormsSlide 3 Which Element Gets Event? xyz Click on this

4. CS 142 Lecture Notes: FormsSlide 4