幫我看下我的代碼的錯誤,感謝
<!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> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?