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

《js事件探秘》学习——鼠标跟随事件demo

2014-10-09 17:21 351 查看

demo图：

HTML代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width:500px;
height:400px;
border:2px #aaa solid;
position:absolute;
top:25%;
left:35%;
}
.dragTitle{
border:2px #aaa solid;
background-color:#aaa;
width:95%;
height:30px;
margin:10px auto;
text-align:center;
line-height:30px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="drag.js"></script>
</head>
<body>
<div id="bigBox" class="box">
<div class="dragTitle">拖我试试</div>
</div>
</body>
</html>

drag.js代码

/*****
拖拽原理：所有鼠标跟随和拖曳都跟光标的位置有关

1.获取光标的坐标clientX,clientY,通过事件属性来获取
2.让元素随着鼠标移动的方法——获取鼠标的位置clientX、clientY,
将待移动元素的坐标值换成鼠标的坐标值。

***注意：随着鼠标移动的元素初始必须设置为绝对定位position：absolute

3.如果直接将鼠标移动的位置clientX、clientY赋给元素left和top,
会造成bug——鼠标始终处于面板左上角。

分析造成bug的原因——left和top表示的是面板左上角的位置，
所以每次出现的是鼠标在面板左上角，而不是鼠标在点击面板时与面板的相对位置

解决bug方案：
1）鼠标点击(onmousedown)面板时，获取到鼠标的位置(clientX,clientY)和面板左边界、上边界与浏览器左边界、上边界的距离(offsetLeft,offsetTop);
2) 计算出鼠标点击时的左、上位置与面板左、上位置的距离差;
3）鼠标移动（onmouseover）时,使面板跟随移动，且两者相对位置与点击时保持一致

4. 限制面板在浏览器某范围移动
//获取窗户的宽、高
winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight,

//计算出面板在浏览器中水平、垂直方向上分别能移动的最大距离
maxW = winW - dragEle.offsetWidth,
maxH = winH - dragEle.offsetHeight;

5.释放鼠标
document.onmouseup = function(){
document.onmouseover = null;
document.onmouseup = null;
}

*****/

window.onload = dragBox;

//通过class获取元素
function getByClass(clsName,parent){
//判断是否传入父元素
var oParent = parent?document.getElementById(parent):document,
eles = [],
elements = oParent.getElementsByTagName('*');

for(var i=0; i<elements.length; i++){
if(elements[i].className == clsName){
eles.push(elements[i]);
}
}
return eles;

}

function dragBox(){
var elem = getByClass("dragTitle","bigBox")[0];

//鼠标点下——点鼠标的任何一个键
elem.onmousedown = fnDown;
}

function fnDown(event){
//浏览器兼容性
event = event || window.event;
var dragbox = document.getElementById("bigBox");
//获取光标的坐标clientX,clientY,通过事件属性来获取
//注意获取元素与窗口左边的距离用offsetLeft

//sx:鼠标点击时与面板的左边界距离
//sy:鼠标点击时与面板的上边界的距离
var sx = event.clientX-dragbox.offsetLeft,
sy = event.clientY-dragbox.offsetTop;

//鼠标在整个页面移动，让面板跟随鼠标移动
document.onmouseover = function(event){
//浏览器兼容性
event = event || window.event;
fnMove(event,sx,sy);

}

//释放鼠标
document.onmouseup = function(){
document.onmouseover = null;
document.onmouseup = null;
}
}

function fnMove(e,posX,posY){

//让鼠标的位置始终与点击面板时的位置保持一致
var dragEle = document.getElementById("bigBox"),
l = e.clientX - posX,
t = e.clientY - posY,

//获取窗户的宽、高
winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight,

//计算出面板在浏览器中水平、垂直方向上分别能移动的最大距离，dragEle.offsetWidth表示面板自身的宽度
maxW = winW - dragEle.offsetWidth,
maxH = winH - dragEle.offsetHeight;

if(l<0){  //面板左移，当l = 0时，面板左边界与浏览器左边界重合
l = 0;
}else if(l>maxW){  //面板右移时
l=maxW;
}
if(t<0){ //面板上移
t = 0;
}else if(t>maxH){  //面板下移
t = maxH;
}
dragEle.style.left = l +"px";
dragEle.style.top = t + "px";

}

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

标签：

相关文章推荐

新的分享

章节导航