| home / experts / dhtml / column7 |   
|
|
The code is Explorer 4-specific. No browser checks are performed. Errors will be generated if run in older versions of Explorer. Our next page discusses a cross-browser version.
<SCRIPT LANGUAGE="JScript">
<!--
currentX = currentY = 0;
whichEl = null;
function grabEl() {
whichEl = event.srcElement;
while (whichEl.id.indexOf("DRAG") == -1) {
whichEl = whichEl.parentElement;
if (whichEl == null) { return }
}
if (whichEl != activeEl) {
whichEl.style.zIndex = activeEl.style.zIndex + 1;
activeEl = whichEl;
}
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
function moveEl() {
if (whichEl == null) { return };
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichEl.style.pixelLeft += distanceX;
whichEl.style.pixelTop += distanceY;
event.returnValue = false;
}
function checkEl() {
if (whichEl!=null) { return false }
}
function dropEl() {
whichEl = null;
}
function cursEl() {
if (event.srcElement.id.indexOf("DRAG") != -1) {
event.srcElement.style.cursor = "move"
}
}
document.onmousedown = grabEl;
document.onmousemove = moveEl;
document.onmouseup = dropEl;
document.onmouseover = cursEl;
document.onselectstart = checkEl;
activeEl = elementName;
//-->
</SCRIPT>
</BODY>
</HTML>
Now we can take the Navigator code from last column and combine it with the above to create a cross-browser version.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 10/22/97
Revised: 10/22/97
URL: http://www.webreference.com/dhtml/column7/allCode.html
