| home / experts / dhtml / column6 |  
|
|
The code is Navigator 4-specific. No browser checks are performed. Explorer 4 recognizes the LANGUAGE = "JavaScript1.2" attribute, reads the code and attempts to execute it. If run in Explorer, errors will be generated. Next column, when we go cross-browser, we'll add the necessary checks.
Identifiers to be inserted marked in blue italics.
...
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function grabEl(e) {
currentX = e.pageX;
currentY = e.pageY;
captureEvents(Event.MOUSEMOVE);
onmousemove = moveEl;
}
function moveEl(e) {
distanceX = (e.pageX - currentX);
distanceY = (e.pageY - currentY);
currentX = e.pageX;
currentY = e.pageY;
document.elementName.moveBy(distanceX,distanceY);
}
function dropEl() {
releaseEvents(Event.MOUSEMOVE);
}
document.elementName.document.onmousedown = grabEl;
document.elementName.document.onmouseup = dropEl;
//-->
</SCRIPT>
</BODY>
</HTML>
Identifiers to be inserted marked in blue italics.
...
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
currentX = currentY = 0;
whichEl = null;
function grabEl(e) {
mouseX = e.pageX;
mouseY = e.pageY;
for ( i=0; i<document.layers.length; i++ ) {
tempLayer = document.layers[i];
if ( tempLayer.id.indexOf("DRAG") == -1 ) { continue }
if ( (mouseX > tempLayer.left) && (mouseX < (tempLayer.left + tempLayer.clip.width))
&& (mouseY > tempLayer.top) && (mouseY < (tempLayer.top + tempLayer.clip.height)) ) {
whichEl = tempLayer;
}
}
if (whichEl == null) { return };
if (whichEl != activeEl) {
whichEl.moveAbove(activeEl)
activeEl = whichEl;
}
currentX = e.pageX;
currentY = e.pageY;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveEl;
}
function moveEl(e) {
distanceX = (e.pageX - currentX);
distanceY = (e.pageY - currentY);
currentX = e.pageX;
currentY = e.pageY;
whichEl.moveBy(distanceX,distanceY);
}
function dropEl() {
document.releaseEvents(Event.MOUSEMOVE);
whichEl = null;
}
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown = grabEl;
document.onmouseup = dropEl;
activeEl = document.elementName;
//-->
</SCRIPT>
</BODY>
</HTML>
In our next column, we will return to the same topic with Explorer and cross-browser versions.
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Oct. 08, 1997
Revised: July 21, 1998
URL: http://www.webreference.com/dhtml/column6/allCode.html
