DOM事件探祕之三_QQ面板拖拽效果

原創 香雪儿sofia 2018-08-23 07:58

注意點：

在標題區按下-在頁面移動-釋放鼠標時停止移動
onmousedown：用戶按下任何鼠標按鈕時觸發
onmousemove：當鼠標指針在元素內部移動時觸發
onmouseup：當用戶釋放鼠標按鈕時觸發
鼠標的光標位置獲取：clientX和clientY屬性，所有瀏覽器都支持這兩個屬性。
保持鼠標與面板的相對位置關係，按下時在哪，鬆開鼠標時光標還在那
移動的範圍極值，始終在瀏覽器窗口內移動
移動拖拽效果核心 位置關係（光標與盒子的距離-clientX-offsetLeft，盒子與瀏覽器的距離-clientWidth，光標與瀏覽器的距離-clientX）

實現效果：
QQ面板拖拽效果

【HTML】

<head>
    <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>
    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

【drag.js】

function getByClass(clsName,parent){
  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;

function drag(){
    // 標題區
   var oTitle=getByClass('login_logo_webqq','loginPanel')[0];
    // 拖曳鼠標按下時去調用一個fnDown()函數
   oTitle.onmousedown=fnDown;
   // 關閉
   var oClose=document.getElementById('ui_boxyClose');
   oClose.onclick=function(){
      document.getElementById('loginPanel').style.display='none';
   }
   // 切換狀態
   var loginState=document.getElementById('loginState'),
       stateList=document.getElementById('loginStatePanel'),
       lis=stateList.getElementsByTagName('li'),
       stateTxt=document.getElementById('login2qq_state_txt'),
       loginStateShow=document.getElementById('loginStateShow');

  loginState.onclick=function(e){
     e = e || window.event;
     if(e.stopPropagation){//點擊狀態列表的時候希望能阻止時間冒泡
          e.stopPropagation();
     }else{
          e.cancelBubble=true;
     }
     stateList.style.display='block';//點擊狀態時能彈出狀態列表
   }

   // 鼠標滑過、離開和點擊狀態列表時
   for(var i=0,l=lis.length;i<l;i++){
      lis[i].onmouseover=function(){
        this.style.background='#567';
      }
      lis[i].onmouseout=function(){
        this.style.background='#FFF';
      }
      lis[i].onclick=function(e){
        e = e || window.event;
        if(e.stopPropagation){
          e.stopPropagation();//點擊<li>時不要向外冒泡，這樣點擊<li>讓<ul>隱藏；
        }else{
          e.cancelBubble=true;
        }
        var id=this.id;
        stateList.style.display='none';//點擊<li>時，ul隱藏，因爲事件冒泡，所以點了li觸發了ul觸發了login state，在上面，我們定義了點擊login state時block，所以點擊li 。ul還在並未隱藏掉
        stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;//只是替換了狀態的文本內容，“我在線上”這類的文本
        loginStateShow.className='';//先清空class
        loginStateShow.className='login-state-show '+id;//再拼接class
      }
   }
   document.onclick=function(){//在頁面的任何地方點擊，list隱藏
      stateList.style.display='none';
   }
}

function fnDown(event){
  event = event || window.event;
  var oDrag=document.getElementById('loginPanel'),
      // 光標按下時光標和麪板之間的距離(獲取鼠標按下的位置座標，始終保持鼠標按下的位置與面板的相對位置)
      disX=event.clientX-oDrag.offsetLeft,
      disY=event.clientY-oDrag.offsetTop;
  // 移動
  document.onmousemove=function(event){
    event = event || window.event;
    fnMove(event,disX,disY);
  }
  // 釋放鼠標
  document.onmouseup=function(){
    // DOM 0級事件，卸載事件及賦值爲空
    document.onmousemove=null;
    document.onmouseup=null;
  }
}

function fnMove(e,posX,posY){
  var oDrag=document.getElementById('loginPanel'),
    // 面板的移動範圍，l是面板與瀏覽器左邊的距離。
      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;
  }
  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')}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

DOM 事件下拉菜單實例

香雪儿sofia 2018-08-23 07:58:24

DOM事件探祕之三-鍵盤事件

香雪儿sofia 2018-08-23 07:58:22

DOM事件探祕之二

香雪儿sofia 2018-08-23 07:58:24

DOM事件探祕之一

香雪儿sofia 2018-08-23 07:58:22

可重複使用的JS函數

香雪儿sofia 2018-08-23 07:58:21