使用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;
}
}