QQ面板拖拽在线状态改变

最新推荐文章于 2022-11-11 09:30:59 发布

where_slr

最新推荐文章于 2022-11-11 09:30:59 发布

阅读量258

点赞数

分类专栏：练手小插件文章标签：鼠标 javascript DOM事件

本文链接：https://blog.csdn.net/where_slr/article/details/72594189

版权

练手小插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

注意事件冒泡，两个事件如果冲突，较具体的事件会冒泡到另一个：

//阻止事件冒泡,在较具体那个事件那里，阻止冒泡到它的上级事件
function(e){
    e = e || window.event;//判断两个不同浏览的鼠标点击
            if(e.stopPropagation){
                        e.stopPropagation();//非IE浏览器
                    }else{
                        e.cancelBubble = true;//IE浏览器
                    }
            }

QQ面板拖拽在线状态改变的案例:
拖拽的过程：
鼠标按键按下：获取此刻的鼠标clientX和clientY，还有此时鼠标距离QQ面板左侧left的距离disX（disX = e.clientX-oDrag.offsetLeft）;

鼠标移动停止：获取此时刻的clientX，鼠标所在坐标是面板左上角的坐标，此时鼠标和原先鼠标点击坐标之间差了disX，所以面板左上角的实际距离需要此时clientX-disX，这样才能是鼠标在原先按下左键的位置，注意面板的移动区域；

鼠标按键松开：使onmousedown = null；onmousemove = null；即可

        function getByClass(clsName,parent){
            var oParent;
            if(parent){
                oParent =  document.getElementById(parent);
            }else {
                oParent = document;
            }
            var eles=[];
            var elements = oParent.getElementsByTagName("*");
            for(var i =0;i<elements.length;i++){
                    if(elements[i].className == clsName){
                            eles.push(elements[i]);
                        }
                }
                return eles;
        }


    window.onload = drag;
        //拖拽移动跟随
        function drag (){
            var oTitle = getByClass("login_logo_webqq","loginPanel")[0];
            //获取拖拽的区域  注意getByClass返回的是一个数组     
            var oClose = document.getElementById("ui_boxyClose");
            var oDrag = document.getElementById("loginPanel");
            //拖曳
            oTitle.onmousedown = fnDown;
            //关闭
            oClose.onclick = function(){
                oDrag.style.display = "none";
            } 
            //切换状态
            var loginState = document.getElementById("loginState");
            //显示状态区域
            var stateList = document.getElementById("loginStatePanel");//ul
            var lis = stateList.getElementsByTagName("li");//li

            var loginStateShow = document.getElementById("loginStateShow"); //状态区域
            var stateTxt =document.getElementById("login2qq_state_txt");//在线区域


            //在线状态区域点击
            loginState.onclick = function(e){
                //阻止事件冒泡
                e = e || window.event;
                if(e.stopPropagation){
                                e.stopPropagation();//非IE浏览器
                            }else{
                                e.cancelBubble = true;//IE浏览器
                            }

                stateList.style.display ="block";

            }

            //鼠标滑过、离开和点击状态列表时
            for(var i = 0;i<lis.length;i++){
                    lis[i].onmouseover = function(){
                        this.style.backgroundColor="#567";
                    }
                    lis[i].onmouseout = function(){
                        this.style.backgroundColor="#fff";
                    }


                    lis[i].onclick = function(e){                       
                            stateList.style.display = "none";   //和上面loginState点击事件冲突，事件冒泡
                    //阻止事件冒泡
                        e = e || window.event;
                        if(e.stopPropagation){
                                e.stopPropagation();
                            }else{
                                e.cancelBubble = true;
                            }

                        var id = this.id;
                        stateTxt.innerHTML= getByClass("stateSelect_text",id)[0].innerHTML;
                        loginStateShow.className = "login-state-show "+id;
                    }
                }
                //点击窗口任意位置
                document.onclick = function(){
                    stateList.style.display = "none";                   
                }


        }

        //鼠标按下,把当前鼠标光标event传过去
        function fnDown(event ){
                var oDrag = document.getElementById("loginPanel");
            //获取整个面板
            /*document.onmousemove = function(event){
                var event = event || window.event;
            //  document.title = event.clientX+","+event.clientY;  获取鼠标的坐标
                oDrag.style.left = event.clientX+"px";
                oDrag.style.top = event.clientY+"px";
                //默认鼠标会移动到面板的左上角，所以要加上一定距离
            } */
        var disX = event.clientX - oDrag.offsetLeft, //鼠标按下时，鼠标距面板左边的距离=鼠标当前的X值 减去  面板和窗口的left值
              disY= event.clientY - oDrag.offsetTop;//鼠标按下时，鼠标距面板上边的距离=鼠标当前的Y值 减去  面板和窗口的ltop值

            //在整个页面中移动
            document.onmousemove = function(event){
                event = event || window.event;//IE兼容
                fnMove(event,disX,disY);
            }   
            //释放鼠标
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

            //鼠标移动
        function fnMove(e,posX,posY){
            var oDrag = document.getElementById("loginPanel");//获取面板
                /*默认鼠标停止移动时，面板左上角会到这个位置，但是，之前鼠标在面板上按下时，与面板左侧有
                个posX的距离，所以，这里需要减去posX,让面板往左移动posX个单位，让鼠标到面板的原位置*/
            var l = e.clientX - posX,   
                //面板的定位是根据其左上角的位置来定的即e.clientX即是鼠标位置也是面板左上角的位置，但，鼠标是
                //位于面板左侧posX距离的，所以需要把面板左移posX个位置
                //移动之后的面板与窗口left的距离（移动之后鼠标的e.clientX减去 按下鼠标时刻 鼠标与面板左边界的距离）
                    t = e.clientY - posY;    
                //移动之后的面板与窗口high的距离（拖拽之后鼠标的clientY减去这个时刻鼠标与面板上边界的距离）
                    document.title = l;
            var winW = document.documentElement.clientWidth || document.body.clientWidth; //兼容性   窗口的宽
            var winH = document.documentElement.clientHeight || document.body.clientHeight;//窗口的宽
            var maxW = winW - oDrag.offsetWidth-10;  //-10 是close区域给设置了个left:-10px;
            var maxH = winH - oDrag.offsetHeight;   //offsetHeight 获取盒子的高度      
            if(l <  0){ 
                l = 0;
            }else if(l > maxW){
                l = maxW;
            }
            if(t<  0){
                t= 10;   //-10 是close区域给设置了个top:-10px;
            }else if(t> maxH){
                t= maxH;
            }
            oDrag.style.left = l+"px";
            oDrag.style.top = t+"px";

        }

CSS

  .loginPanel {
            width: 380px;
            height: 247px;
            left: 400px;
            top: 120px;
            position: absolute;
            border: 1px solid #ccc;
            background: #f6f6f6;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 0 0 8px #000;
            -webkit-box-shadow: 0 0 8px #000;
            box-shadow: 0 0 8px #000;
        }


        .login_logo_webqq {
            background: url('../images/login_window_logo.png') no-repeat -210px -0px;
            margin-left: 100px;
            margin-top: 10px;
            width: 200px;
            height: 44px;
            cursor: move;/*鼠标变成可移动的样子*/
        }


        .inputs {
            font: bold 15px arial;
            margin-left: 80px;
            margin-top: 30px;
        }

            .inputs .sign-input {
                padding-bottom: 20px;
            }

              .inputs .sign-input input {
                    width: 170px;
                    border: 1px #ccc solid;
                    color: #868686;
                    font-size: 16px;
                    padding: 2px;
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -khtml-border-radius: 10px;
                    -border-radius: 10px;
                    outline: none;
                }

        .btn {
            background: url("../images/login_btn.png") no-repeat -111px 0;
            width: 111px;
            height: 36px;
            border: 0;
            text-align: center;
            line-height: 20px;
            color: #0C4E7C;
            cursor: pointer;
            margin-left: 14px;
        }


        .login-state-trigger {
            cursor: pointer;
            display: block;
            float: left;
            height: 16px;
            overflow: hidden;
            width: 120px;
            margin: 4px 0 0 0;
        }

        .login-state-trigger2 {
            margin: 10px 0 0 20px;
        }

        .login-state-down {
            background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
            float: left;
            height: 6px;
            margin-top: 5px;
            overflow: hidden;
            text-indent: -999em;
            width: 7px;
        }

        .login-state-show {
            float: left;
            height: 14px;
            overflow: hidden;
            text-indent: -999em;
            width: 14px;
            margin: 1px 4px 0 0;
        }

        .login-state-txt {
            float: left;
            margin-left: 5px;
            font-size: 12px;
            >line-height:18px!important;
        }

        .login-state .callme {
            background: url("../images/ptlogin.png") -72px 0 no-repeat;
        }

        .login-state .online {
            background: url("../images/ptlogin.png") 0 0 no-repeat;
        }

        .login-state .away {
            background: url("../images/ptlogin.png") -18px 0 no-repeat;
        }

        .login-state .busy {
            background: url("../images/ptlogin.png") -36px 0 no-repeat;
        }

        .login-state .silent {
            background: url("../images/ptlogin.png") -108px 0 no-repeat;
        }

        .login-state .hidden {
            background: url("../images/ptlogin.png") -54px 0 no-repeat;
        }

        .statePanel {
            display: none;
            position: absolute;
            right: 68px;
            top: 193px;
            z-index: 10;
            margin: 0;
            border-width: 1px;
            border-style: solid;
            border-color: #ccc #6a6a6a #666 #cdcdcd;
            padding: 0;
            width: 100px;
            height: 133px;
            overflow: hidden;
            background: white;
            font-size: 12px;
            line-height: 1.5;
        }

            .statePanel .statePanel_li {
                display: block;
                float: left;
                margin: 0;
                padding: 3px 0;
                width: 100px;
                height: 16px;
                line-height: 16px;
                overflow: hidden;
                zoom: 1;
                cursor: pointer;
            }

        .stateSelect_icon {
            float: left;
            margin: 2px 0 0 5px;
            width: 14px;
            height: 14px;
            overflow: hidden;
        }

        .stateSelect_text {
            margin: 0 0 0 22px;
        }

        .bottomDiv {
            margin-left: 70px;
        }

        .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖动</title>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/drag.js"></script>
</head>
<body>
    <div class="loginPanel" id="loginPanel">
         <div style="position: relative; z-index: 1;">
            <div class="ui_boxyClose" id="ui_boxyClose"></div>
        </div>
        <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>
</body>
</html>