QQ面板在浏览器中拖曳效果

   本文为《DOM事件探秘》课程中第四章“QQ面板在浏览器窗口中拖曳效果”的代码实现。
   本文及js代码demo为笔者在课后实现，代码中有详细注释，解说了上课视频中老师的代码功能及实现思想。读者可以复制本文代码作为笔记进行参考。
   核心代码为drag.js文件中的Javascript实现，重点内容包含：

1、封装函数实现通过className和父元素Id实现元素目标的获取；
2、建立拖曳函数（包含鼠标按住事件、鼠标移动事件、松开按钮事件）；
3、关闭面板
面板在窗口边框的效果图：

界面描述demo：



    拖动
    
    


    
    
 
 
     关闭
 

 
 LOGO头部

 
 
     账户信息输入区
 

 
 
     登录 及
     状态选择区

**界面样式代码（main.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')
 }

**JS代码实现（drag.js文件）：**

//先封装一个方法用来获取相关class属性元素对象
//思路：通过对应className和它的父元素ID定位这个className的元素
function getByClass(clasName, parent){
    //如果有传父元素过来，让它不要传父元素这个对象而是传父元素的ID，如果没有传父元素过来那么我们就传document
    var oParent = parent?document.getElementById(parent):document;
    var eles=[];
    //获取该父元素下的所有Tag元素elements
    var elements = oParent.getElementsByTagName('*');
    //把父元素数组中的所有Tag元素取出来挨个遍历一遍，看看各元素的className和传进来的clasName是不是一样的
    //如果一样则把找到的这个元素加进eles[]数组
    for(var i=0,l=elements.length; i 要在页面中移动 > 释放鼠标时停止移动
function drag(){
  //1、获取点击拖动的位置：标题区域
    //通过标题的className和标题的父元素id定位这个标题元素对象集，并取第一个作为作用对象
    var oTitle = getByClass('login_logo_webqq','loginPanel')[0];
  //2、拖曳功能
    //给oTitle绑定一个事件onmousedown：在鼠标按下任何按钮时触发
    oTitle.onmousedown = fnDown;//在鼠标按下时调用fnDown函数

  //3、关闭
    var oClose = document.getElementById("ui_boxyClose");
    oClose.onclick = close;
}



//鼠标按下函数
function fnDown(event){
    event = event || window.event;
    var oDrag = document.getElementById("loginPanel");
    //定义光标按下时在面板区内部的左、上距离
    var disX = event.clientX-oDrag.offsetLeft,//光标的x坐标 - 面板在窗口左边的距离
 disY = event.clientY-oDrag.offsetTop;
    //移动事件
    document.onmousemove = function(event){
 event = event || window.event;
 fnMove(event,disX,disY); //在鼠标移动时调用移动函数fnMove()
    }
    //鼠标松开按键时释放移动函数
    document.onmouseup = function(event){
      //当鼠标释放就说明onmousemove什么都没有做
 document.onmousemove = null;
 //切忌不要改 fnMove = null;
    }
}
//鼠标移动函数
function fnMove(event,X,Y){
    var oDrag = document.getElementById("loginPanel");
    //定义面板在浏览器窗口的坐标
    var dleft = event.clientX-X, //主板左边距离=事件在窗口中坐标-光标在面板中占据的宽和高
 dtop = event.clientY-Y;
    //定义浏览器窗口的宽高（兼容不同版本浏览器）
    var winW = document.documentElement.clientWidth || document.body.clientWidth,//获取窗口宽
 winH = document.documentElement.clientHeight || document.body.clientHeight;//获取窗口高
    //定义面板在窗口中移动的最大范围
    var maxW = winW - oDrag.offsetWidth, //offsetWidth用来获取这个盒子的宽
 maxH = winH - oDrag.offsetHeight;
    //测试，发现当面板移动到边缘后还是会继续移动，这里就需要强制处理
    //document.title = dleft+","+dtop;
    if(dleft<0){
 oDrag.style.left = 0+"px";
    }else if(dleft>maxW){
 oDrag.style.left = maxW-10+"px";
    }else{
 oDrag.style.left = dleft+"px";  
    }
    if(dtop<0){
 oDrag.style.top = 10+"px";
    }else if(dtop>maxH){
 oDrag.style.top = maxH+"px";
    }else{
 oDrag.style.top = dtop+"px";
    }
}
//关闭函数
function close(){
    var oTab = document.getElementById("loginPanel");
    oTab.style.display = "none";
}

QQ面板在浏览器中拖曳效果

CSS教程相关栏目本月热门文章