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

求高手看一下這個(gè)代碼，調(diào)試了很久都拖曳不了

<!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>用戶(hù)登錄</p><span?id="close"></span>
????<ul>
????<li>用戶(hù)名&nbsp;<input?type="text"?name="username"><li/>
????<li>&nbsp;密碼&nbsp;&nbsp;<input?type="text"?name="password"><li/>
????</ul>
??</div>
</body>
</html>

一直都無(wú)法點(diǎn)住p標(biāo)簽后拖曳整個(gè)框，不知道哪里有問(wèn)題

hangerror

2016-11-10

源自：DOM事件探秘 4-2

關(guān)注問(wèn)題我要回答

814

操作

收起

2 回答

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

//?下面的代碼是在你的代碼基礎(chǔ)上修改的，里面的錯(cuò)誤全部標(biāo)出并改正，可以復(fù)制下面的代碼在瀏覽器中測(cè)試?yán)?<!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設(shè)置margin-left和margin-top會(huì)影響js中最后設(shè)置的style,建議去掉或者優(yōu)化js中l(wèi),t的得數(shù),就不給你優(yōu)化了,現(xiàn)在可以拖動(dòng)了,只是這個(gè)數(shù)字有點(diǎn)問(wèn)題,自己改一下吧*/
????????#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];?//?直接寫(xiě)getElementsByTagName('p')取出來(lái)的otitle是數(shù)組
????????????otitle.onmousedown=fndown;??//?這里調(diào)用函數(shù)不要在函數(shù)名后面寫(xiě)(),否則函數(shù)會(huì)直接加載
????????}
????????function?fndown(event){
????????????console.log(11)?//?在這里加個(gè)console可以看見(jiàn)函數(shù)是什么時(shí)候調(diào)用的
????????????event=event||window.event;
????????????var?box=document.getElementById("login_box");
????????????var?disX=event.clientX-box.offsetLeft;??//這里clientX寫(xiě)錯(cuò)了,已經(jīng)幫你改回
????????????var?disY=event.clientY-box.offsetTop;???//這里clientY寫(xiě)錯(cuò)了,已經(jīng)幫你改回
????????????document.onmousemove=function(event){
????????????????event=event||window.event;
????????????????fnmove(event,disX,disY);
????????????}
????????????document.onmouseup=function(){????//這里之前多了一個(gè)括號(hào),已經(jīng)去掉
????????????????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>用戶(hù)登錄</p><span?id="close"></span>
????<div>
????????<label?for="username">用戶(hù)名&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>