求高手看一下這個代碼，調(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>用戶登錄</p><span?id="close"></span>
????<ul>
????<li>用戶名 <input?type="text"?name="username"><li/>
????<li> 密碼 <input?type="text"?name="password"><li/>
????</ul>
??</div>
</body>
</html>一直都無法點住p標簽后拖曳整個框，不知道哪里有問題
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的得數(shù),就不給你優(yōu)化了,現(xiàn)在可以拖動了,只是這個數(shù)字有點問題,自己改一下吧*/ ????????#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是數(shù)組 ????????????otitle.onmousedown=fndown;??//?這里調(diào)用函數(shù)不要在函數(shù)名后面寫(),否則函數(shù)會直接加載 ????????} ????????function?fndown(event){ ????????????console.log(11)?//?在這里加個console可以看見函數(shù)是什么時候調(diào)用的 ????????????event=event||window.event; ????????????var?box=document.getElementById("login_box"); ????????????var?disX=event.clientX-box.offsetLeft;??//這里clientX寫錯了,已經(jīng)幫你改回 ????????????var?disY=event.clientY-box.offsetTop;???//這里clientY寫錯了,已經(jīng)幫你改回 ????????????document.onmousemove=function(event){ ????????????????event=event||window.event; ????????????????fnmove(event,disX,disY); ????????????} ????????????document.onmouseup=function(){????//這里之前多了一個括號,已經(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>用戶登錄</p><span?id="close"></span> ????<div> ????????<label?for="username">用戶名 <input?type="text"?name="username"?id="username"?/></label> ????????<label?for="password"> 密碼 <input?type="text"?name="password"?id="password"></label> ????</div> </div> </body> </html>2016-11-10
21、27、28行有錯