002-DOM事件实例-实现一个可以拖拽的登陆窗口

摘要：项目需求及基本的和相信大家都用过登陆框，它可以在页面中任意的拖拽，然后点击状态可以切换各种状态。

前言：这是跟着慕课网一个老师的视频做的，这几天在重新的梳理自己，写完这个例子要系统的学一下jQuery，我司现在用的还是比较多，毕竟用了它不用考虑IE兼容性，可以让开发更有效率。

相信大家都用过QQ登陆框，它可以在页面中任意的拖拽，然后点击状态可以切换各种状态。
首先做出HTML的结构

    

        
        

            

        
        
        


        
        

            
帐　号：
            
密　码：
        
        
        

            
            

            

                

                    
                    
状态
                    
                    
下
                    
                    
在线
                    
                    

                        

                            

                            
我在线上
                        
                        

                            

                            
Q我吧
                        
                        

                            

                            
离开
                        
                        

                            

                            
忙碌
                        
                        

                            

                            
请勿打扰
                        
                        

                            

                            
隐身
                        
                    
                
            
        
    

CSS部分省略不写

由于涉及到大量的操作class类名的操作，首先封装一个可以兼容IE取class类名的函数，因为IE10以前是不支持document.getElementByClassName()

    /**
     * 
     * @clsName 要找的className的名字
     * @parent 可选参数，传入父元素就在父元素下找所有的className
     */
    function getByClass(clsName, parent) {
        //如果可以用getElementsByClassName
        if(document.getElementsByClassName){
            return document.getElementsByClassName(clsName);
        }
        //加入传入的parent存在就用document.getElementById(parent)取父元素，减少判断，否则oParent就等于document
        var oParent = parent ? document.getElementById(parent) : document,
            eles = [],  //定义一个空的数组
            elements = oParent.getElementsByTagName("*");   //取所有的标签
    
        for (var i = 0, l = elements.length; i < l; i++) {
            if (elements[i].className == clsName) {
                eles.push(elements[i]);
            }
        }
        return eles;
    }

在页面加载完成后执行一个函数

    window.onload = drag;

函数drag

    function drag(){
        //首选取出要点击然后拖拽的区域
        var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
        //然后给这个元素绑定一个鼠标按下时候的时间，鼠标按下时执行函数fnDown()
        oTitle.onmousedown = fnDown;
    }

函数fnDown()

    function fnDowm(event) {
        //兼容一下IE的事件
        event = event || window.event;
        //取到整个要拖拽的登陆框的id
        var oDrag = document.getElementById("loginPanel"),
            //光标按下时，光标和面板之间的距离
            //event.clientX是光标按下时，光标距离窗口水平方向的距离
            //event.clientY是光标按下时，光标距离窗口垂直方向的距离
            //oDrag.offsetLeft面板距离窗口的水平距离
            disX = event.clientX - oDrag.offsetLeft,
            disY = event.clientY - oDrag.offsetTop;
        //因为光标是在整个窗口移动，所以为窗口绑定一个鼠标移动的事件
        document.onmousemove = function(event){
            event = event || window.event;
            fnMove(event,disX,disY);
        }
    }

函数fnMove()
只需要实现光标按下时，光标移动到某点时，登录框处的位置恰好等于光标此时减去光标到登陆框边缘的距离

    //
    function fnMove(e,posX,posY){
        var oDrag = document.getElementById("loginPanel");
        l = e.clientX - posX,
        t = e.clientY - posY,
        //这是判断输入框不越界
        winW = document.documentElement.clientWidth || document.body.clientWidth,
        winH = document.documentElement.clientHeight || document.body.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;
        }
        
        //及时更新登录框的style.left和right信息
        oDrag.style.left = l + "px";
        oDrag.style.top = t + "px";
    }

//获取到关闭标签元素

    var oClose = document.getElementById("ui_boxyClose");
    //为这个元素绑定一个click事件
    oClose.onclick = function () {
        //当点击这个按钮时，把这个按钮的display设置为none
        document.getElementById("loginPanel").style.display = "none";
    }