<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
#demo{
500px;
height:400px;
border:1px solid black;
position:absolute;
top:100px;
left:100px;
}
#demo #shang{
100%;
height:50px;
background-color: gray;
font-size:18px;
line-height:50px;
position:absolute;
top:0;
left:0;
cursor:move;
}
#demo #shang .zcxx{
float:left;
}
#demo #shang .gb{
float:right;
}
</style>
</head>
<body>
<div id="demo">
<div id="shang">
<span class="zcxx">注册信息(可以拖拽)</span>
<span class="gb">[关闭]</span>
</div>
</div>
</body>
</html>
<script>
var demo=document.getElementById("demo");
var shang=document.getElementById("shang");
tuozhuai(shang,demo);
function tuozhuai(current,move) //current是鼠标按下的地方(shang),move是会移动的地方(demo)
{
current.onmousedown=function (event) {
var event=event||window.event;
var x=event.clientX-move.offsetLeft;//当前盒子(shang）的横坐标
var y=event.clientY-move.offsetTop; //当前盒子的纵坐标
document.onmousemove=function (event) {
var event=event||window.event;
move.style.left=event.clientX-x+"px"; //
move.style.top=event.clientY-y+"px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup=function () {
document.onmousemove=null;
}
}
</script>