<script>
var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件触发对象
obj.setCapture() //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex //获取对象的z轴坐标值
//设置对象的z轴坐标值为100,确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true //布尔值,判断鼠标是否已按下,true为按下,false为未按下
}
function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(down&&event.srcElement==obj){
with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-y
}
}
}
function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
</script>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() 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=init() onmousemove=moveit() onmouseup=stopdrag() 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=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>
分享到:
相关推荐
JS可拖动层 javascript可拖动层
js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器
Javascript,层,拖动,特效,.rar,下载,
各种js层特效 层特效 JavaScript
很简单,一看就懂的!完全js实现层的拖动和关闭!
可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript...
JS javascript 拖动层类 兼容所有浏览器
JavaScript做的可以的拖动的层DIV,鼠标按下拖动 JavaScript做的可以的拖动的层DIV,鼠标按下拖动 JavaScript做的可以的拖动的层DIV,鼠标按下拖动
javascript 实现可拖动的层(DIV),支持兼容性
JS判断多图层拖动重叠例子,适合任何浏览器
js拖动层事例-一定范围内拖动! 值得下载看看!资源免费,大家分享!!
javascript div拖动层 ,代码简单。
js版许愿墙 拖动层 许愿墙 可拖动层
一个asp.net 1.1做的拖动层然后保存层拖动后的信息,偶自己添加了层信息保存在xml中。 js不是偶写的,偶只修改了一部份!
JavaScrpt 拖动层鼠标松开后自动排序
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
JS做的隐藏与显示DIV可拖动弹出层实例代码 学习参考
原生js Dialog对话框插件制作19种对话框弹出层拖动
用JS实现层拖动的实例代码 同时附加动态打开层效果,超酷的
js拖动层例子-整个网页可以拖动! 值得下载看看!资源免费,大家分享!!