<html>
<head>
<script>
var down = false;
function UpMouse(){
down = false;
}
var startX = 0; startY = 0;startLeft = 0;startTop = 0;
function MoveLayer(){
if (down){
thelayer.style.pixelLeft = startLeft+event.clientX-startX;
thelayer.style.pixelTop = startTop+event.clientY-startY;
formview.viewpos.value = " X:"+event.clientX+" Y:"+event.clientY+"startX:"+startX+" startY:"+startY;
}//可以观察鼠标的运动
}
function DownMouse(){
if (!document.all) return true;//暂时只支持4.0以上的IE浏览器
if (event.srcElement.name=="layermove"){//对应要拖动的层的name
thelayer = event.srcElement;
down = true;
startX = event.clientX;
startY = event.clientY;
startLeft = thelayer.style.pixelLeft;
startTop = thelayer.style.pixelTop;
}
}
</script>
</head>
<body οnmοusedοwn="DownMouse()" οnmοusemοve="MoveLayer()" οnmοuseup="UpMouse()">
<form name="formview">
<center>
<input name="viewpos" value=" 这里显示鼠标的运动轨迹" size="37" style ="border=0;color:white;background:blue">
</center><!--隐藏了文本框的边框,这也算是一个DHTML的应用吧。呵呵!-->
</form>
<div name="layermove" style="position:absolute;top:100pt;left:215pt;cursor:hand;background:#f5f5ff;width:150pt;height:100pt">
<p align="center"></P><P>这个层可以拖动?!</P><P>不信你试试看!</p>
</div>
</body>
</html>
<head>
<script>
var down = false;
function UpMouse(){
down = false;
}
var startX = 0; startY = 0;startLeft = 0;startTop = 0;
function MoveLayer(){
if (down){
thelayer.style.pixelLeft = startLeft+event.clientX-startX;
thelayer.style.pixelTop = startTop+event.clientY-startY;
formview.viewpos.value = " X:"+event.clientX+" Y:"+event.clientY+"startX:"+startX+" startY:"+startY;
}//可以观察鼠标的运动
}
function DownMouse(){
if (!document.all) return true;//暂时只支持4.0以上的IE浏览器
if (event.srcElement.name=="layermove"){//对应要拖动的层的name
thelayer = event.srcElement;
down = true;
startX = event.clientX;
startY = event.clientY;
startLeft = thelayer.style.pixelLeft;
startTop = thelayer.style.pixelTop;
}
}
</script>
</head>
<body οnmοusedοwn="DownMouse()" οnmοusemοve="MoveLayer()" οnmοuseup="UpMouse()">
<form name="formview">
<center>
<input name="viewpos" value=" 这里显示鼠标的运动轨迹" size="37" style ="border=0;color:white;background:blue">
</center><!--隐藏了文本框的边框,这也算是一个DHTML的应用吧。呵呵!-->
</form>
<div name="layermove" style="position:absolute;top:100pt;left:215pt;cursor:hand;background:#f5f5ff;width:150pt;height:100pt">
<p align="center"></P><P>这个层可以拖动?!</P><P>不信你试试看!</p>
</div>
</body>
</html>