媒介：这是随着慕课网一个先生的视频做的，这几天在从新的梳理本身，写完这个例子要体系的学一下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';
    }