幫我看下我的代碼的錯誤,感謝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)拖拽效果</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="手機(jī)/郵箱/用戶名">
<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){
//獲得窗口顯示區(qū)域的寬
var bodyW=document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;
? ??
? ? //獲得元素對象的實(shí)際寬度
? ? var elW=Element.offsetWidth; ? ?
? ? var elH=Element.offsetHeight;?
? ? //設(shè)置元素對象的位置
? ? el.style.left=(bodyW-elW)/2+'px';
? ? el.style.top=(bodyH-elH)/2+'px';
}
//自動擴(kuò)展元素到全部顯示區(qū)域
function fillToBody(el){
el.style.width=document.documentElement.clientWidth;
el.style.height=document.documentElement.clientHeight;
}
//三個鼠標(biāo)事件
//偏移
var mouseOffsetX=0;
var mouseOffsetY=0;
//標(biāo)記是否為可拖動
var isDraging=false;
//在標(biāo)題欄上按下時,要計(jì)算鼠標(biāo)相對拖拽元素的左上角的坐標(biāo),并標(biāo)記元素為可拖動。
g('dialogTit').addEventListener('mousedown',function(e){
var e=e||window.event;//兼容IE鼠標(biāo)獲取的方法
//計(jì)算鼠標(biāo)的偏移值,鼠標(biāo)按下去時的鼠標(biāo)位置減去登陸浮層相對于頁面左邊的位置
mouseOffsetX=e.pageX-g('dialog').offsetLeft;
mouseOffsetY=e.pageY-g('dialog').offsetTop;
isDraging=true;
})
//鼠標(biāo)開始移動,要檢測登錄浮層是否可標(biāo)記為移動,如果是,則更新元素的位置到當(dāng)前鼠標(biāo)的位置(注意:要減去第一步中獲得的偏移)。
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';
}
}
//鼠標(biāo)松開的時候,標(biāo)記元素為不可拖動狀態(tài)即可。
document.onmouseup=function(){
isDraging=false;
}
</script>
</html> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?