<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖动层-DHTML技术</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isCatchDiv = false;
var dragX = 0;
var dragY = 0;
function loadDiv(){
divMove.style.top=document.body.scrollTop;
divMove.style.left=document.body.scrollLeft;
}
function hideDiv(){
divMove.style.visibility = "hidden";
}
function showDiv(){
loadDiv();
divMove.style.visibility = "visible";
}
function catchDiv(){
isCatchDiv = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragX=x-divMove.style.pixelLeft;
dragY=y-divMove.style.pixelTop;
divMove.setCapture();
document.onmousemove = moveDiv;
}
function releaseDiv(){
isCatchDiv = false;
divMove.releaseCapture();
document.onmousemove = null;
}
function moveDiv(){
if(isCatchDiv){
divMove.style.left = event.x+document.body.scrollLeft-dragX;
divMove.style.top = event.y+document.body.scrollTop-dragY;
}
}
window.onload = showDiv;
//-->
</SCRIPT>
<style type="text/css">
body{
font-size:12px;
font:Arial, Helvetica, sans-serif;
}
body a,a:link,a:visited {color:#000000;text-decoration:none}
#divMove{
position:absolute;
width:300px;
height:200px;
background-color:#E1F0FF;
}
</style>
</head>
<body>
<div id="divMove" style="cursor:move;" onMouseDown="catchDiv()" onMouseUp="releaseDiv()">
<a href="http://hi.baidu.com/ycosxhack">余弦函数</a>
</div>
</body>
</html>
div层拖动
该文章经过本人整理所得,欢迎转载,转载时请加上本文地址;本文基于署名 2.5 中国大陆许可协议发布，请勿演绎或用于商业目的，但是必须保留本文的署名张志涛（包含链接如您有任何疑问或者授权方面的协商，请给我留言。