<html>
<head>
<title> New Document </title>
<script>
var xCalendar,yCalendar,zCalendar,downCalendar=false,objCalendar;
function startMoveCalendar(){
objCalendar=event.srcElement; //事件触发对象
objCalendar.setCapture(); //设置属于当前对象的鼠标捕捉
zCalendar=objCalendar.style.zIndex; //获取对象的z轴坐标值
objCalendar.style.zIndex=2012; //设置对象的z轴坐标值为100,确保当前层显示在最前面
xCalendar=event.offsetX; //获取鼠标指针位置相对于触发事件的对象的X坐标
yCalendar=event.offsetY; //获取鼠标指针位置相对于触发事件的对象的Y坐标
downCalendar=true; //布尔值,判断鼠标是否已按下,true为按下,false为未按下
}
function moveCalendar(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(downCalendar&&event.srcElement==objCalendar){
with(objCalendar.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
posLeft=document.body.scrollLeft+event.x-xCalendar;
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-yCalendar;
}
}
}
function stopMoveCalendar(){
downCalendar=false; //onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
objCalendar.style.zIndex=zCalendar; //还原对象的Z轴坐标值
objCalendar.releaseCapture(); //释放当前对象的鼠标捕捉
}
</script>
</head>
<body>
<div οnmοusedοwn=startMoveCalendar() οnmοusemοve=moveCalendar() οnmοuseup=stopMoveCalendar() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div οnmοusedοwn=startMoveCalendar() οnmοusemοve=moveCalendar() οnmοuseup=stopMoveCalendar() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div οnmοusedοwn=startMoveCalendar() οnmοusemοve=moveCalendar() οnmοuseup=stopMoveCalendar() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>
</body>
</html>
DIV 鼠标拖动
最新推荐文章于 2019-09-24 14:21:53 发布