不能左右拖动-慕课网

不能左右拖动

来源：4-1 [DOM事件] QQ面板拖拽效果（上）

楠木710

2016-08-07 18:16

代码如下：

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";
}

可以上下拖动，为什么左右不能拖动？求解啊

写回答关注