摘要：項(xiàng)目需求及基本的和相信大家都用過登陸框，它可以在頁(yè)面中任意的拖拽，然后點(diǎn)擊狀態(tài)可以切換各種狀態(tài)。

前言：這是跟著慕課網(wǎng)一個(gè)老師的視頻做的，這幾天在重新的梳理自己，寫完這個(gè)例子要系統(tǒng)的學(xué)一下jQuery，我司現(xiàn)在用的還是比較多，畢竟用了它不用考慮IE兼容性，可以讓開發(fā)更有效率。

相信大家都用過QQ登陸框，它可以在頁(yè)面中任意的拖拽，然后點(diǎn)擊狀態(tài)可以切換各種狀態(tài)。
首先做出HTML的結(jié)構(gòu)

    

        
        

            

        
        
        


        
        

            
帳　號(hào)：
            
密　碼：
        
        
        

            
            

            

                

                    
                    
狀態(tài)
                    
                    
下
                    
                    
在線
                    
                    

                        

                            

                            
我在線上
                        
                        

                            

                            
Q我吧
                        
                        

                            

                            
離開
                        
                        

                            

                            
忙碌
                        
                        

                            

                            
請(qǐng)勿打擾
                        
                        

                            

                            
隱身
                        
                    
                
            
        
    

CSS部分省略不寫

由于涉及到大量的操作class類名的操作，首先封裝一個(gè)可以兼容IE取class類名的函數(shù)，因?yàn)镮E10以前是不支持document.getElementByClassName()

    /**
     * 
     * @clsName 要找的className的名字
     * @parent 可選參數(shù)，傳入父元素就在父元素下找所有的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 = [],  //定義一個(gè)空的數(shù)組
            elements = oParent.getElementsByTagName("*");   //取所有的標(biāo)簽
    
        for (var i = 0, l = elements.length; i < l; i++) {
            if (elements[i].className == clsName) {
                eles.push(elements[i]);
            }
        }
        return eles;
    }

在頁(yè)面加載完成后執(zhí)行一個(gè)函數(shù)

    window.onload = drag;

函數(shù)drag

    function drag(){
        //首選取出要點(diǎn)擊然后拖拽的區(qū)域
        var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
        //然后給這個(gè)元素綁定一個(gè)鼠標(biāo)按下時(shí)候的時(shí)間，鼠標(biāo)按下時(shí)執(zhí)行函數(shù)fnDown()
        oTitle.onmousedown = fnDown;
    }

函數(shù)fnDown()

    function fnDowm(event) {
        //兼容一下IE的事件
        event = event || window.event;
        //取到整個(gè)要拖拽的登陸框的id
        var oDrag = document.getElementById("loginPanel"),
            //光標(biāo)按下時(shí)，光標(biāo)和面板之間的距離
            //event.clientX是光標(biāo)按下時(shí)，光標(biāo)距離窗口水平方向的距離
            //event.clientY是光標(biāo)按下時(shí)，光標(biāo)距離窗口垂直方向的距離
            //oDrag.offsetLeft面板距離窗口的水平距離
            disX = event.clientX - oDrag.offsetLeft,
            disY = event.clientY - oDrag.offsetTop;
        //因?yàn)楣鈽?biāo)是在整個(gè)窗口移動(dòng)，所以為窗口綁定一個(gè)鼠標(biāo)移動(dòng)的事件
        document.onmousemove = function(event){
            event = event || window.event;
            fnMove(event,disX,disY);
        }
    }

函數(shù)fnMove()
只需要實(shí)現(xiàn)光標(biāo)按下時(shí)，光標(biāo)移動(dòng)到某點(diǎn)時(shí)，登錄框處的位置恰好等于光標(biāo)此時(shí)減去光標(biāo)到登陸框邊緣的距離

    //
    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;
        }
        
        //及時(shí)更新登錄框的style.left和right信息
        oDrag.style.left = l + "px";
        oDrag.style.top = t + "px";
    }

//獲取到關(guān)閉標(biāo)簽元素

    var oClose = document.getElementById("ui_boxyClose");
    //為這個(gè)元素綁定一個(gè)click事件
    oClose.onclick = function () {
        //當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，把這個(gè)按鈕的display設(shè)置為none
        document.getElementById("loginPanel").style.display = "none";
    }