今天没什么工作，想着复习下js中获取元素的位置属性的东西，这些地方我一直很混乱，分不清，今天学习了下，写了个鼠标拖动div层的例子（目前只能在ie下运行），ff下获取事件源跟鼠标坐标的方式跟ie不同，有时间学习下ff下的这些东西。<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type = "text/css">
*{
margin:0;
padding:0;
overflow:hidden;
}
#rect{
height:30px;
width:200px;
line-height:30px;
background-color:#dfdfdf;
text-align:center;
border:solid 1px #ccc;
position:absolute;
top:2;
left:2;
cursor:move;
}
</style>
</head>
<body>
<div id = "rect">
Hello 青春华航！
</div>
<script type = "text/javascript">
var client_width = document.body.clientWidth;
var flag = false;
var obj_rect = document.getElementById("rect");
var cx = 0;
var cy = 0;
function mov(){
if(flag){
ev = window.event;
obj_rect.style.top = ev.clientY - cy + "px";
obj_rect.style.left = ev.clientX - cx + "px";
}
}
function d(){
var ev = window.event;
var l = obj_rect.offsetLeft;
var r = l + 200;
var t = obj_rect.offsetTop;
var wn = t + 30;
m_x = ev.clientX;
m_y = ev.clientY;
if(((m_x > l) && (m_x <r)) && ((m_y > t) && (m_y < wn))){
cx = m_x -l;
cy = m_y -t;
flag = true;
}
}
function u(){
flag = false;
}
document.onmousemove = mov;
document.onmousedown = d;
document.onmouseup = u;
</script>
</body>
</html>
鼠标拖动div层
最新推荐文章于 2025-11-28 04:56:28 发布
本文介绍了一个仅适用于IE浏览器的鼠标拖动DIV层的示例代码。通过JavaScript实现了DIV元素的位置更新，并探讨了Firefox浏览器下实现相同功能的不同方法。
扫一扫
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
