002-DOM事件例項-實現一個可以拖拽的登陸視窗

yangdepp發表於2017-07-27
事件

前言：這是跟著慕課網一個老師的視訊做的，這幾天在重新的梳理自己，寫完這個例子要系統的學一下jQuery，我司現在用的還是比較多，畢竟用了它不用考慮IE相容性，可以讓開發更有效率。

1.專案需求及基本的HTML和CSS

相信大家都用過QQ登陸框，它可以在頁面中任意的拖拽，然後點選狀態可以切換各種狀態。
首先做出HTML的結構

    <div class="loginPanel" id="loginPanel">
        <!-- 關閉區域 -->
        <div style="position: relative; z-index: 1;">
            <div class="ui_boxyClose" id="ui_boxyClose"></div>
        </div>
        <!-- QQ圖示以及點選區域 -->
        <div class="login_logo_webqq"></div>

        <!-- 輸入框區域 -->
        <div class="inputs">
            <div class="sign-input"><span>帳　號：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ號碼或Email帳號" onFocus="if (value ==`QQ號碼或Email帳號`){value =``}" onBlur="if (value ==``){value=`QQ號碼或Email帳號`;}" /></span></div>
            <div class="sign-input"><span>密　碼：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
        </div>
        <!-- 底部區域 -->
        <div class="bottomDiv">
            <!-- 登入按鈕 -->
            <div class="btn" style="float: left"></div>
            <div>
                <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="選擇線上狀態">
                    <!-- 狀態圖示 -->
                    <div id="loginStateShow" class="login-state-show online">狀態</div>
                    <!-- 下拉小角標 -->
                    <div class="login-state-down">下</div>
                    <!-- 預設的狀態 -->
                    <div class="login-state-txt" id="login2qq_state_txt">線上</div>
                    <!-- 隱藏的下拉選單 -->
                    <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
                        <li id="online" class="statePanel_li">
                            <div class="stateSelect_icon online"></div>
                            <div class="stateSelect_text">我線上上</div>
                        </li>
                        <li id="callme" class="statePanel_li">
                            <div class="stateSelect_icon callme"></div>
                            <div class="stateSelect_text">Q我吧</div>
                        </li>
                        <li id="away" class="statePanel_li">
                            <div class="stateSelect_icon away"></div>
                            <div class="stateSelect_text">離開</div>
                        </li>
                        <li id="busy" class="statePanel_li">
                            <div class="stateSelect_icon busy"></div>
                            <div class="stateSelect_text">忙碌</div>
                        </li>
                        <li id="silent" class="statePanel_li">
                            <div class="stateSelect_icon silent"></div>
                            <div class="stateSelect_text">請勿打擾</div>
                        </li>
                        <li id="hidden" class="statePanel_li">
                            <div class="stateSelect_icon hidden"></div>
                            <div class="stateSelect_text">隱身</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

2.實現拖拽登入框

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`;
    }

3.實現點選按鈕關閉輸入框

//獲取到關閉標籤元素

    var oClose = document.getElementById(`ui_boxyClose`);
    //為這個元素繫結一個click事件
    oClose.onclick = function () {
        //當點選這個按鈕時，把這個按鈕的display設定為none
        document.getElementById(`loginPanel`).style.display = `none`;
    }

相關文章