模仿慕课网上QQ拖拽效果，chrom有效果，但是Firefox不兼容。提示event is not defined。不知道为什么。

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兼容，请问为什么啊?

迁就LOSE

浏览 2227回答 1

1回答

随时随地看视频慕课网APP