-
鼠标拖动层的JS方法
-
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#l1{
position:absolute;top:100px;left:100px;
width:100px;height:150px;border:1px solid #ccc;
background:#f00;
z-index:1
}
#l2{
position: absolute;top:150px;left:150px;
width:100px;height:150px;border:1px solid #666;
background:#0f0;
z-index:2
}
#l3{
position: absolute;top:200px;left:200px;
width:100px;height:150px;border:1px solid #999;
background:#00f;
z-index:3;
}
</style>
<script type="text/javascript">
var x,y,z,down=false,obj;
function init(){
obj=event.srcElement; //获取焦点对象
obj.setCapture(); //设置鼠标捕捉
z=obj.style.zIndex; //取得原z轴位置
obj.style.zIndex=100; //设定在最上层
x=event.offsetX; //获取鼠标指针相对于触发事件的对象的x位置
y=event.offsetY; //获取鼠标指针相对于触发事件的对象的y位置
down=true; //设置鼠标状态为按下状态
}
function moveIt(){
if(down&&event.srcElement==obj){
with(obj.style){
posLeft=document.body.scrollLeft+event.x-x;
posTop=document.body.scrollTop+event.y-y;
}
}
}
function stopDrag(){
down=false;
obj.style.zIndex=z;
obj.releaseCapture();
}
</script>
</head>
<body>
<div id="l1">level1</div>
<div id="l2">level2</div>
<div id="l3">level3</div>
学着写的一段鼠标拖动的代码，感觉挺有意思。</br>
本例需要掌握的技巧比较多，捕捉鼠标，获取鼠标位置(相当于对象)，释放鼠标捕捉，文档的滚动距离。</br>
1. setCapture() 设置属于当前文档的对象的鼠标捕捉。</br>
2. event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。</br>
3. event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。</br>
4. releaseCapture() 释放当前文档中对象的鼠标捕捉。</br>
5. scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。</br>
6. scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。</br>
7. with 为一个或多个语句设定默认对象。</br>
8. event.x,event.y 设置或获取鼠标指针位置相对于窗口对象的 x ，y坐标。</br>
简单的拖动DIV的主要编程思路：</br>
1、应该了解拖动，首先即是坐标。也就是说，要了解DHTML里面的坐标的属性。这里我们用的是event.clientX和event.clientY，即鼠标相对于边距X的距离和Y的距离。如果有不明白的，可以去查阅相关资料，这里不再赘述。</br>
2、如何得到拖动对的的坐标呢？可以用offsetTop和offsetLeft来得到，属性我也不再多说，请查阅DHTML参考。</br>
3、应该有大致的思路了吧，用什么事件来触发拖动的句柄呢？当然可以用ondrag的事件，但是不太可取。也不太利于以后为兼容而做的准备工作。那还有什么事件可以用？仔细想想，拖动时会触发什么事件，一、当鼠标移上对象时。二、鼠标按下。三鼠标移动。四、鼠标放开。这几个也就是那几个事件。即对应的onmouseover、omousedown、onmousemove、onmouseup事件。</br>
4、如何计算坐标？我的思路是这样的：一，鼠标按下时，记得拖动物件的相对坐标。二、拖动时捕获对象，并实时得到坐标，用当前的坐标减去原始坐标，得到新的坐标，并把拖动物件的left和top设置为当前的X和Y坐标。三、鼠标放开时，释放所有的对象。</br>
5、开始编码。</br>
</body>
</html>
-
3854 次浏览
0 条评论
收藏
作者信息
-
关注
-
试
免费试用
-
咨询热线
-
咨询热线
020-82299 259
-
在线咨询
