<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标拖拽效果</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: url(images/baidu_demo.png) no-repeat top center;position: relative;}
.link{position: absolute;top: 0;right: 0;}
.ui-dialog{width: 380px;height: auto;z-index: 1000;position: absolute;top: 0;background: #fff;}
.dialogTit{height: 48px;background: #f5f5f5;line-height: 48px;color: #535353;padding-left: 20px;position: relative;}
.dialogBtn{background: url(images/close_def.png) no-repeat;position: absolute;top: 10px;right: 10px;width: 16px;height: 16px;}
.dialogBtn:hover{background: url(images/close_hov.png) no-repeat;}
.dialogCon{padding: 20px;}
.dialogCon input{display: block;height: 40px;line-height: 40px;border: 1px solid #d5d5d5;width: 305px;margin-bottom: 20px;padding: 0 10px 0 25px;font-size: 16px;}
.dialogCon .name{background: url(images/input_username.png) no-repeat;}
.dialogCon .pass{background: url(images/input_password.png) no-repeat;}
.dialogCon a{display: block;text-align: right;text-decoration: none;font-size: 12px;}
.dialogCon button{display: block;width: 340px;height: 40px;line-height: 40px;border: none;background: #3f81b0;font-size: 18px;color: #fff;margin: 20px 0;}
.ui-mask{background: rgba(0,0,0,0.5);height: 1000px;width: 1000px;z-index: 999;}
</style>
<body>
<div><a href="javascript:;">登录</a></div>
<div id="mask"></div><!-- mask遮罩层 -->
<div id="dialog">
<div id="dialogTit">
登录通行证
<a href="#"></a>
</div>
<form>
<input type="text" placeholder="手机/邮箱/用户名">
<input type="password" placeholder="密码">
<a href="#">忘记密码</a>
<button>登录</button>
<a href="#">立即注册</a>
</form>
</div><!-- dialog登录提示框 -->
</body>
<script type="text/javascript">
//获取元素对象
function g(id){return document.getElementById(id);}
//自动居中元素（el = Element）
function autoCenter(el){
//获得窗口显示区域的宽
var bodyW=document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;
//获得元素对象的实际宽度
var elW=Element.offsetWidth;
var elH=Element.offsetHeight;
//设置元素对象的位置
el.style.left=(bodyW-elW)/2+'px';
el.style.top=(bodyH-elH)/2+'px';
}
//自动扩展元素到全部显示区域
function fillToBody(el){
el.style.width=document.documentElement.clientWidth;
el.style.height=document.documentElement.clientHeight;
}
//三个鼠标事件
//偏移
var mouseOffsetX=0;
var mouseOffsetY=0;
//标记是否为可拖动
var isDraging=false;
//在标题栏上按下时，要计算鼠标相对拖拽元素的左上角的坐标，并标记元素为可拖动。
g('dialogTit').addEventListener('mousedown',function(e){
var e=e||window.event;//兼容IE鼠标获取的方法
//计算鼠标的偏移值，鼠标按下去时的鼠标位置减去登陆浮层相对于页面左边的位置
mouseOffsetX=e.pageX-g('dialog').offsetLeft;
mouseOffsetY=e.pageY-g('dialog').offsetTop;
isDraging=true;
})
//鼠标开始移动，要检测登录浮层是否可标记为移动，如果是，则更新元素的位置到当前鼠标的位置(注意：要减去第一步中获得的偏移)。
document.onmousemove=function(e){
var e=e||window.event;
var mouseX=e.pageX;
var mouseY=e.pageY;
var moveX=0;
var moveY=0;
if(isDraging===true){
moveX=moveX-mouseOffsetX;
moveY=moveY-mouseOffsetY;
g('dialog').style.left=moveX+'px';
g('dialog').style.top=moveY+'px';
}
}
//鼠标松开的时候，标记元素为不可拖动状态即可。
document.onmouseup=function(){
isDraging=false;
}
</script>
</html>