window.onload=darg;
function darg(){
var oTitle=document.getElementById('login_logo');
var oclose=document.getElementById('Close');
var btn=document.getElementById('btn');
oclose.onclick=fnClick;
oTitle.onmousedown=fnDown;
}
function fnDown(event){
var oDrag=document.getElementById('loginpanel');
//光标按下时光标与面板之间的距离
e = event||window.event;
disX=e.clientX-oDrag.offsetLeft;
disY=e.clientY-oDrag.offsetTop;
//移动
document.onmousemove=function() {
fnMove(event,disX,disY);
}
//释放鼠标
document.onmouseup=function() {
document.onmousemove=null;
document.onmouseup=null;
}
//光标位置有问题
/*document.title=event.clientX+','+event.clientY;
oDrag.style.left=event.clientX+'px';
oDrag.style.top=event.clientY+'px';*/
}
function fnMove(e,posX,posY) {
e= event || window.event;
var oDrag=document.getElementById('loginpanel');
l=e.clientX-posX;
t=e.clientY-posY;
winW=document.documentElement.clientWidth;
winH=document.documentElement.clientHeight;
maxW=winW-oDrag.offsetWidth-10,//防止按钮溢出
maxH=winH-oDrag.offsetHeight;
if(l<0){
l=0;
}else if(l>maxW){
l=maxW;
}
if(t<0){
t=10;//防止按钮溢出
}else if(t>maxH){
t=maxH;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
function fnClick(){
var oDrag=document.getElementById('loginpanel');
oDrag.style.display='none';
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/login.css"> <script src="js/login.js"></script> <title>登录聊天室</title> </head> <body> <form name="login" action="login.jsp" method="post"> <div id="loginpanel"> <div id="_exit"> <div id="Close"> </div> </div> <div id="login_logo"></div> <div id="inputs"> <div> <span>账号:</span> <span> <input id="user" type="text" value=""> </input> </span> </div> <div> <span>密码:</span> <span> <input id="pwd" type="password"></input> </span> </div> </div> <div id="btn"><input type="submit" value="登录"></input></div> <div id="msg"></div> </div> </form> </body> </html>
chrome可以拖动，Firefox无法拖动，不要求IE兼容，请问为什么啊?
相关分类