DIV 鼠标拖动

qihuitoday

浏览: 11658 次
性别:
来自: 上海

最近访客更多访客>>

woodding2008

InJavaWeTrust

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (9)

社区版块

存档分类

DIV

<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 onmousedown=startMoveCalendar() onmousemove=moveCalendar() onmouseup=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 onmousedown=startMoveCalendar() onmousemove=moveCalendar() onmouseup=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 onmousedown=startMoveCalendar() onmousemove=moveCalendar() onmouseup=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>