移动层

来源：互联网发布：没有更新到数据库编辑：程序博客网时间：2024/04/30 16:42

<!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>
<script type="text/javascript" language="javascript">
var obj,x,y,dx,dy;
function Setup()
{
if(!document.getElementsByTagName){ return;}

divs=document.getElementsByTagName('DIV');
for(var i=0;i<divs.length;i++)
{
    if(divs[i].className!="drag")continue;
divs[i].onmousedown=Drag;
}
}
function Drag(e)
{
if(!e)var e=window.event;
obj=(e.target)?e.target:e.srcElement;
obj.style.borderColor="red";
dx=x-obj.offsetLeft;
dy=y-obj.offsetTop;
}
function move(e)
{
if(!e)var e=window.event;
if(e.pageX)
{
    x=e.pageX;
y=e.pageY;
}
else if(e.clientX)
{
    x=e.clientX;
y=e.clientY;
}
else return;
if(obj)
{
    obj.style.left=x-dx;
obj.style.top=y-dy;
}
}
function Drop()
{
if(!obj)return;
obj.style.borderColor="black";
obj=false;
}
document.onmousemove=move;
document.onmouseup=Drop;
window.onload=Setup;
</script>
<style type="text/css">
.drag{
position:absolute;
border:thin inset 10;
width:10cm;
position:absolute;
visibility:visible;
left: 150px;
top: 15px;
background-color: #FFFF00;
}
</style>
</head>

<body>
<div id="dd" class="drag">ddddddddddd</div>

<div id="dd" class="drag">ddddddddddd</div>
</body>
</html>