                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

求高手看一下這個代碼，調試了很久都拖曳不了

<!doctype?html>
<html>
<head>
<meta?charset="UTF-8">
????<title>Document</title>
????<style>
?????*{margin:0;padding:0;}
?????ul{position:?absolute;left:?30px;top:?50px;}
?????li{list-style:?none;margin-top:?5px;}
?????#login_box{width:300px;height:150px;background:#eee;
?????border:1px?solid?#ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;}
?????#login_box?p{height:20px;border-bottom:1px?solid?#ccc;font-size:12px;padding:6px?0?0?5px;font-weight:bold;}
?????#close{width:14px;height:14px;background:url(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160815283.png)?no-repeat;position:absolute;right:4px;top:6px;}
??</style>
??<script>
??window.onload=drag;
function?drag(){
??var?otitle=document.getElementsByTagName('p');
??otitle.onmousedown=fndown();
??
}
function?fndown(event){
??event=event||window.event;
??var?box=document.getElementById("login_box");
???var?disX=event.cilentX-box.offsetLeft;
???var?disY=event.cilentY-box.offsetTop;
???document.onmousemove=function(event){
????event=event||window.event;
???fnmove(event,disX,disY);}
???document.onmouseup=function)(){
????document.onmousemove=null;
???}
???
}

function?fnmove(event,px,py){
??var?box=document.getElementById("login_box");
????var?l=event.clientX-px;
????var?t=event.clientY-py;
????var?clientW=document.documentElement.clientWidth||document.body.clientWidth;
????var?clientH=document.documentElement.clientHeight||document.body.clientHeight;
????var?maxl=clientW-box.offsetWidth;
????var?maxt=clientH-box.offsetHeight;
????if?(l<0)?{
??????l=0;
????}
????else?if(l>maxl)?{
????????l=maxl;
????}
?????if?(t<0)?{
??????t=0;
????}
????else?if(t>maxt)?{
????????t=maxt;
????}
????box.style.left=l+'px';
????box.style.top=t+'px';
}???


??</script>
</head>
<body>
??
??<div?id="login_box">
????<p>用戶登錄</p><span?id="close"></span>
????<ul>
????<li>用戶名&nbsp;<input?type="text"?name="username"><li/>
????<li>&nbsp;密碼&nbsp;&nbsp;<input?type="text"?name="password"><li/>
????</ul>
??</div>
</body>
</html>

一直都無法點住p標簽后拖曳整個框，不知道哪里有問題

hangerror

2016-11-10

源自：DOM事件探秘 4-2

關注問題我要回答

804

操作

收起

2 回答

Himushroom 回答被采納 +3 積分
2016-11-10

//?下面的代碼是在你的代碼基礎上修改的，里面的錯誤全部標出并改正，可以復制下面的代碼在瀏覽器中測試啦
<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????????*{margin:0;padding:0;}
????????ul{position:?absolute;left:?30px;top:?50px;}
????????li{list-style:?none;margin-top:?5px;}
????????/*?這里給login_box設置margin-left和margin-top會影響js中最后設置的style,建議去掉或者優(yōu)化js中l(wèi),t的得數,就不給你優(yōu)化了,現在可以拖動了,只是這個數字有點問題,自己改一下吧*/
????????#login_box{width:300px;height:150px;background:#eee;
????????????border:1px?solid?#ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;}
????????#login_box?p{height:20px;border-bottom:1px?solid?#ccc;font-size:12px;padding:6px?0?0?5px;font-weight:bold;}
????????#close{width:14px;height:14px;background:url(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160815283.png)?no-repeat;position:absolute;right:4px;top:6px;}
????</style>
????<script>
????????window.onload=drag;
????????function?drag(){
????????????var?otitle=document.getElementsByTagName('p')[0];?//?直接寫getElementsByTagName('p')取出來的otitle是數組
????????????otitle.onmousedown=fndown;??//?這里調用函數不要在函數名后面寫(),否則函數會直接加載
????????}
????????function?fndown(event){
????????????console.log(11)?//?在這里加個console可以看見函數是什么時候調用的
????????????event=event||window.event;
????????????var?box=document.getElementById("login_box");
????????????var?disX=event.clientX-box.offsetLeft;??//這里clientX寫錯了,已經幫你改回
????????????var?disY=event.clientY-box.offsetTop;???//這里clientY寫錯了,已經幫你改回
????????????document.onmousemove=function(event){
????????????????event=event||window.event;
????????????????fnmove(event,disX,disY);
????????????}
????????????document.onmouseup=function(){????//這里之前多了一個括號,已經去掉
????????????????document.onmousemove?=?null;
????????????????document.onmouseup?=?null;????//這里建議加上
????????????}
????????}

????????function?fnmove(event,px,py){
????????????var?box=document.getElementById("login_box");
????????????var?l=event.clientX-px;
????????????var?t=event.clientY-py;
????????????var?clientW=document.documentElement.clientWidth?||?document.body.clientWidth;
????????????var?clientH=document.documentElement.clientHeight?||?document.body.clientHeight;
????????????var?maxl=clientW-box.offsetWidth;
????????????var?maxt=clientH-box.offsetHeight;
????????????if?(l<0)?{
????????????????l=0;
????????????}?else?if(l>maxl)?{
????????????????l=maxl;
????????????}
????????????if?(t<0)?{
????????????????t=0;
????????????}
????????????else?if(t>maxt)?{
????????????????t=maxt;
????????????}
????????????box.style.left=l+'px';
????????????box.style.top=t+'px';
????????}


????</script>
</head>
<body>

<div?id="login_box">
????<p>用戶登錄</p><span?id="close"></span>
????<div>
????????<label?for="username">用戶名&nbsp;<input?type="text"?name="username"?id="username"?/></label>
????????<label?for="password">&nbsp;密碼&nbsp;&nbsp;<input?type="text"?name="password"?id="password"></label>
????</div>
</div>
</body>
</html>