                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

求高手看一下这个代码，调试了很久都拖曳不了

<!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>用户名&nbsp;<input type="text" name="username"><li/>
    <li>&nbsp;密码&nbsp;&nbsp;<input type="text" name="password"><li/>
    </ul>
  </div>
</body>
</html>

一直都无法点住p标签后拖曳整个框，不知道哪里有问题

hangerror

2016-11-10

源自：DOM事件探秘 4-2

关注问题我要回答

840

操作

收起

2 回答

Himushroom 回答被采纳 +3 积分
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,建议去掉或者优化js中l,t的得数,就不给你优化了,现在可以拖动了,只是这个数字有点问题,自己改一下吧*/
        #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是数组
            otitle.onmousedown=fndown;  // 这里调用函数不要在函数名后面写(),否则函数会直接加载
        }
        function fndown(event){
            console.log(11) // 在这里加个console可以看见函数是什么时候调用的
            event=event||window.event;
            var box=document.getElementById("login_box");
            var disX=event.clientX-box.offsetLeft;  //这里clientX写错了,已经帮你改回
            var disY=event.clientY-box.offsetTop;   //这里clientY写错了,已经帮你改回
            document.onmousemove=function(event){
                event=event||window.event;
                fnmove(event,disX,disY);
            }
            document.onmouseup=function(){    //这里之前多了一个括号,已经去掉
                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">用户名&nbsp;<input type="text" name="username" id="username" /></label>
        <label for="password">&nbsp;密码&nbsp;&nbsp;<input type="text" name="password" id="password"></label>
    </div>
</div>
</body>
</html>