不能左右拖動
代碼如下:
index.html
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>無標題文檔</title> <link?type="text/css"?rel="stylesheet"?href="style.css"?/> <script?type="text/javascript"?src="script.js"></script> </head> <body> <div?id="loginpanel"> <div?id="login_logo_webqq"></div> ????<div?class="inputs"> ???? <div> ???????? <span>賬????號:</span> ????????????<input?type="text"?value="QQ賬號"?/> ????????</div> ????????<div> ???????? <span>密????碼:</span> ????????????<input?type="text"?/> ????????</div> ????</div> ????<div?id="bottomdv"> ???? <div?id="btn"></div> ????????<div?id="loginstate"> ???????? <div?id="loginstateshow"?class="state_show?online"></div> ????????????<div?id="state_down"></div> ????????????<div?id="login_state">我在線上</div>??????????? ????????</div> ????</div> </div> </body> </html>
樣式style.css
/*?CSS?Document?*/
*{?margin:0?auto;?padding:0;}
#loginpanel{?left:400px;
?top:120px;?
?width:380px;?
?height:247px;
?border-radius:10px;
?border:1px?solid?#ccc;
?position:absolute;
?background:#f6f6f6;
?box-shadow:0?0?8px?#000;
?position:absolute;}
#login_logo_webqq{?width:200px;
height:44px;
margin-left:100px;
margin-top:10px;
background:url(image/login_window_logo.png)?-210px;
cursor:move;}
.inputs{margin-left:80px;
????????margin-top:30px;
margin-bottom:20px;
font:bold?15px?arial;}
.inputs?div{?margin-top:20px;}
.inputs?input{?width:170px;
border-radius:10px;
border:1px?solid?#ccc;
height:23px;
font-size:16px;}
#bottomdv{?margin-left:70px;}
#btn{?background:url(image/login_btn.png)?-111px?0;
??width:111px;
??height:36px;
??float:left;
??margin-left:14px;
??cursor:pointer;}
#loginstate{?cursor:pointer;
?float:left;
?width:120px;
?height:16px;
?margin-top:10px;
?margin-left:20px;}
#loginstateshow{?float:left;
height:14px;
width:14px;}
#online{background:url(image/ptlogin.png)?0?0;}
#state_down{?background:url(image/ptlogin.png)?0?-22px;
float:left;
height:6px;
width:7px;
margin:5px?5px?0?7px;}
#login_state{?font-size:12px;}js文件
//?JavaScript?Document
window.onload=drag;
function?drag(){
var?otitle=document.getElementById("login_logo_webqq");
otitle.onmousedown=fndown;
}
function?fndown(e){
e=e?||?window.event;
var?opt=document.getElementById("loginpanel"),
disx=e.clientX-opt.offsetLeft,
disy=e.clientY-opt.offsetTop;
document.onmousemove=function?(e){
e=e?||?window.event;
fnmove(e,disx,disy);
}
}
function?fnmove(e,posx,posy){
e=e?||?window.event;
var?opt=document.getElementById("loginpanel"),
l=e.clinetX-posx,
t=e.clientY-posy;
opt.style.left=l+"px";
opt.style.top=t+"px";
}可以上下拖動,為什么左右不能拖動?求解啊
2016-08-08
你再仔細看看