15.02.2013 Views

JavaScript Examples Bible - UserWorks Technologies

JavaScript Examples Bible - UserWorks Technologies

JavaScript Examples Bible - UserWorks Technologies

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)<br />

// set global var to a reference to dragged element<br />

function setSelectedObj() {<br />

var imgObj = window.event.srcElement<br />

if (imgObj.id.indexOf(“map”) == 2) {<br />

selectedObj = imgObj<br />

bringToFront(selectedObj)<br />

return<br />

}<br />

selectedObj = null<br />

return<br />

}<br />

// do the dragging (called repeatedly by onMouseMove)<br />

function dragIt() {<br />

if (selectedObj) {<br />

shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY -<br />

offsetY))<br />

return false<br />

}<br />

}<br />

// set global vars and turn on mousemove trapping (called by onMouseDown)<br />

function engage() {<br />

setSelectedObj()<br />

if (selectedObj) {<br />

document.onmousemove = dragIt<br />

offsetX = window.event.offsetX - document.body.scrollLeft<br />

offsetY = window.event.offsetY - document.body.scrollTop<br />

}<br />

}<br />

// restore everything as before (called by onMouseUp)<br />

function release() {<br />

if (selectedObj) {<br />

document.onmousemove = null<br />

selectedObj = null<br />

}<br />

}<br />

<br />

<br />

<br />

onMouseMove Event Handler<br />

<br />

Click and drag the images:<br />

<br />

<br />

<br />

<br />

<br />

<br />

119<br />

elementObject.onMouseMove

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!