<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面的拖拽功能实现</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.dialog{
width: 380px;
height: auto;
position:fixed;
z-index: 1000;
border: 1px solid #d5d5d5;
background-color:#fff;
display: none;
}
.diatitle{
height: 48px;
line-height: 40px;
text-align: center;
color:#535353;
background-color: #f5f5f5;
}
.diacontent{
padding: 15px 20px;
}
.close{
font-size: 20px;
float: right;
margin-right: 20px;
}
#txt{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#pwd{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#btn{
display: block;
width:80px;
height: 40px;
margin:0 auto;
background-color: #CCCCCC;
border:none;
outline-style: none;
}
.mask{
background-color:#000000;
opacity: 0.4;
filter:Alpha(opacity=40);
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
display: none;
}
</style>
<body style="height:1500px">
<div class="dialog" ;
isDraging=true;
objleft=dialog.offsetLeft;
objtop=dialog.offsetTop;
posX = parseInt(mousePosition(event).x)
posY = parseInt(mousePosition(event).y);
offsetX=posX-objleft;
offsetY=posY-objtop;
}
//移动
function move(event) {
if (isDraging == true) {
var x=mousePosition(event).x-offsetX;
var y=mousePosition(event).y-offsetY;
var w = document.documentElement.clientWidth - dialog.offsetWidth;
var h = document.documentElement.clientHeight - dialog.offsetHeight;
x=Math.min(w,Math.max(0,x));
y=Math.min(h,Math.max(0,y));
dialog.style.left = x + 'px';
dialog.style.top = y + 'px';
}
}
//松开
function up() {
isDraging= false;
}
function mousePosition(evt){
var xPos, yPos;
evt = evt || window.event;
if (evt.pageX) {
xPos = evt.pageX;
yPos = evt.pageY;
} else {
xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
return {
x: xPos,
y: yPos
}
}
}
</script>
</html>