使用js中常用的鼠标事件实现一个拖拽的例子

一、js中常用的几个必备鼠标事件

  • onclick: 元素上发生鼠标点击时触发.
  • ondblclick: 元素上发生鼠标双击时触发.
  • onmousedown: 当元素上按下鼠标按钮时触发.
  • onmouseup: 当在元素上释放鼠标按钮时触发.
  • onmouseout: 当鼠标指针移出元素时触发.
  • onmousemove: 当鼠标指针移动到元素上时触发.
  • onmouseover: 当鼠标指针移动到元素上时触发.

这里来说一下move和over的区别:over是鼠标指针在刚进入该元素的时候就触发,在鼠标在该元素上移动过程中不在改变状态;move是只要鼠标指针在该元素的上面移动就触发,在鼠标在该元素上移动过程中状态一直在变化,比如坐标就在一直改变,多数情况下用over就可以了。

二、使用一个例子来实现拖拽效果

html结构代码

"http://www.w3.org/1999/xhtml">

    拖动
    "css/main.css" rel="stylesheet" />
    <script src="js/drag.js">script>


    <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">帐 号:"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帐号';}" />div>
            <div class="sign-input">密 码:name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" />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>
       
    id="loginStatePanel" class="statePanel login-state" style="display: none">
  • id="online" class="statePanel_li"> <div class="stateSelect_icon online">div> <div class="stateSelect_text">我在线上div>
  • id="callme" class="statePanel_li"> <div class="stateSelect_icon callme">div> <div class="stateSelect_text">Q我吧div>
  • id="away" class="statePanel_li"> <div class="stateSelect_icon away">div> <div class="stateSelect_text">离开div>
  • id="busy" class="statePanel_li"> <div class="stateSelect_icon busy">div> <div class="stateSelect_text">忙碌div>
  • id="silent" class="statePanel_li"> <div class="stateSelect_icon silent">div> <div class="stateSelect_text">请勿打扰div>
  • id="hidden" class="statePanel_li"> <div class="stateSelect_icon hidden">div> <div class="stateSelect_text">隐身div>
div> div> div> div>

上面是html结构代码,不是重点不详细说,此外,由于css代码和其他图片资源太多不给出了,我的重点是梳理一下怎么实现这个面板的拖拽。
使用class分析结构:
loginPanel:整个面板。
ui_boxyClose:右上角的关闭按钮。
login_logo_webqq:标题区域。
inputs:用户名和密码。
bottomDiv:图标显示qq状态区域。

下面是拖拽的js代码的实现:

//因为html中基本都是使用的class所以我们封装一个使用类名取出元素的方法。getElementsByClassName()在ie10一下都不能用,所以我们自己封装。
function getByClass(clsname,parent){
  var par,arr,eles=[];
  if(parent){
    par=document.getElementById(parent);
  }else{
    par=document;
  }
  arr=par.getElementsByTagName('*');
  //console.log(arr);
  for(var i=0;iif(arr[i].className==clsname){
      eles.push(arr[i]);
    }
  } 
  //console.log(eles);
  return eles;
}
window.onload=function(){
  getByClass("login_logo_webqq","loginPanel");
}

接着我们来进行拖拽功能的实现:我们想要实现地是当用户在标题区域login_logo_webqq按下鼠标不释放的在页面拖动时候面板跟着移动的效果。
在这里说一下面板要想被拖动的条件:任何能够跟着鼠标移动的东西 都要有一个前提:绝对定位。所以面板必须被绝对定位。还有拖动的意思其实就是面板跟着光标走,光标去哪里,面板就去哪里,所以我们就可以简单的按照下面实现:

indow.onload=drag;
function drag(){
  //获取鼠标被按住就能被拖动的区域:标题
  var title= getByClass("login_logo_webqq","loginPanel")[0];
  //console.log(title);
  //给标题区域加上按下鼠标事件
  title.onmousedown=fdown;
}
function fdown(){
  //希望面板跟着光标走,下面需要获得面板
  var panel=document.getElementById("loginPanel");
  console.log(panel);
  //当按下鼠标就应该加上在元素内部移动的事件了也就是move,因为是在整个页面移动所以是document
  document.onmousemove=function(event){
     event = event || window.event;
     panel.style.left=event.clientX +'px';
     panel.style.top=event.clientY +'px';
  }  

}

这是最简单的情况,但是我们发现这样写是有错的,就是当我们在标题区域按下鼠标打算移动的时候,那个鼠标都会跑到左上角去,其实这是正常的,因为计算坐标值的时候都是用左上角作为参考,那怎么让鼠标留在原位置不跑去左上角呢? 那我们的鼠标的left, top需要在原来左上角的位置右移,下移。那面板需要左移上移。所以鼠标的left, top在原来的基础上减去一个按下鼠标的位置相对面板的left,top.所以重点是求按下鼠标的位置相对面板的left,top。这也很好求是鼠标的坐标-面板相对浏览器的left,top.

window.onload=drag;
function drag(){
  //获取鼠标被按住就能被拖动的区域:标题
  var title= getByClass("login_logo_webqq","loginPanel")[0];
  //console.log(title);
  //给标题区域加上按下鼠标事件
  title.onmousedown=fdown;
}
//fdown的event是鼠标按下的事件
function fdown(event){
  //希望面板跟着光标走,下面需要获得面板
  var panel=document.getElementById("loginPanel");
  //console.log(panel);
  //光标按下时,光标和面板的相对距离
  event = event || window.event;
  var reX=event.clientX-panel.offsetLeft;
  var reY=event.clientY-panel.offsetTop;
  console.log(reX);
  //当按下鼠标就应该加上在元素内部移动的事件了也就是move,因为是在整个页面移动所以是document
  //这里的event是面板移动时候的事件
  document.onmousemove=function(event){
     event = event || window.event;
     panel.style.left=(event.clientX-reX) +'px';
     panel.style.top=(event.clientY-reY) +'px';
  }  

}

最后一个不足就是拖拽过程中,不能出去屏幕,我们可以这样解决:
我们水平的left的范围:0到(浏览器宽度-面板宽度)
我们垂直的top的范围:0到(浏览器高度-面板高度)
这里还有一点需要特别注意,那就是样式表里面有没有top,left的设置,如果有会影响到left的范围,我们这里就有,这样的话需要先把css中设置的top,left先处理掉。

window.onload=drag;
function drag(){
  //获取鼠标被按住就能被拖动的区域:标题
  var title= getByClass("login_logo_webqq","loginPanel")[0];
  //console.log(title);
  //给标题区域加上按下鼠标事件
  title.onmousedown=fdown;

}
//fdown的event是鼠标按下的事件
function fdown(event){
  //希望面板跟着光标走,下面需要获得面板
  var panel=document.getElementById("loginPanel");
  //console.log(panel);
  //光标按下时,光标和面板的相对距离
  event = event || window.event;
  var reX=event.clientX-panel.offsetLeft;
  var reY=event.clientY-panel.offsetTop;
  //console.log(reX);
  //当按下鼠标就应该加上在元素内部移动的事件了也就是move,因为是在整个页面移动所以是document
  //这里的event是面板移动时候的事件
  //获得left和top的最大值
  var MX=(document.documentElement.clientWidth || document.body.clientWidth)-panel.offsetWidth;
  var MY=(document.documentElement.clientHeight || document.body.clientHeight)-panel.offsetHeight;
  console.log(MX);
  document.onmousemove=function(event){
     event = event || window.event;
     var X=event.clientX-reX;
     var Y=event.clientY-reY;
     if(X<0){
      X=0;
     }else if(X>MX){
       X=MX;
     }
     if(Y<0){
      Y=0;
     }else if(Y>MY){
       Y=MY;
     }
     panel.style.left=X +'px';
     panel.style.top=Y +'px';
  }  
   // 释放鼠标
  document.onmouseup=function(){
    document.onmousemove=null;
  }

}

你可能感兴趣的:(web前端)