您的位置：首页 > Web前端 > JavaScript

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

2017-06-20 17:25 981 查看

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

onclick: 元素上发生鼠标点击时触发.

ondblclick: 元素上发生鼠标双击时触发.

onmousedown: 当元素上按下鼠标按钮时触发.

onmouseup: 当在元素上释放鼠标按钮时触发.

onmouseout: 当鼠标指针移出元素时触发.

onmousemove: 当鼠标指针移动到元素上时触发.

onmouseover: 当鼠标指针移动到元素上时触发.

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

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

html结构代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<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
cf76
>
</div>
</div>
</div>
</body>
</html>

上面是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;i<arr.length;i++){
if(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;
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标移动 javascript

相关文章推荐

新的分享

章节导航