js-鼠标拖拽窗口bug修复

来源：互联网发布：软件工程项目开发计划编辑：程序博客网时间：2024/05/23 18:32

拖拽原理：我们在拖拽窗口的时候，鼠标有这样一个过程：

鼠标按下onmousedown-鼠标移动到目的地onmousemove-松开鼠标onmouseup。

鼠标点击在窗口上的那个点在整个拖拽过程中始终不变，即该点到窗口左边的值，还有该点到窗口上边的值。到这里你可能会有疑问：我拖拽鼠标的时候，鼠标有可能点在靠左边的地方，或是靠右边的地方，那这个鼠标按下去的点不就是一个不确定的数值了？

是这样的，所以我们将这这个点的两个坐标值分别存放在两个变量里面：divX 、divY;

然后，我们先做一个简单的布局；给一个div，设置宽高，看做是窗口；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 150px;
border: 5px solid #333;
background: #d8d8d8;
position: absolute;
}
</style>
<script type="text/javascript" >
window.onload=function(){
var oBox=document.getElementById('box');
var divX=0;
var divY=0;
oBox.onmousedown=function(ev){
var iEvent=ev||event;
divX=iEvent.clientX-oBox.offsetLeft;//这个变量不需要单位px！
divY=iEvent.clientY-oBox.offsetTop;//这个变量不需要单位px！
//document是指onmousemove这个动作是在整个document区域内运动的，相应松开鼠标的时候，也是在document任意地方都可以松开鼠标
document.onmousemove=function(ev){
var iEvent=ev||event;
oBox.style.left=iEvent.clientX-divX+'px';
oBox.style.top=iEvent.clientY-divY+'px';
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
return false;//在低版本的火狐浏览器下，第二次拖拽的时候，窗口会有出现鬼影的现象，以此来修复这个bug；
}
}
</script>
</head>
<body>
<div id="box">

</div>
</body>
</html>

拖拽窗口的代码初步完成，写到这里大概你就明白是什么原理了，然后我们在测试一下这段代码，你会发现，当你快速的拖拽，将窗口给拖出了可视区域外，那么盒子跑了，拽不回来了；为修复这个bug，我们给代码加上几个限制条件，阻止窗口离开可视区域，代码如下：

window.onload=function(){

var oBox=document.getElementById('box');
var divX=0;
var divY=0;
oBox.onmousedown=function(ev){
var iEvent=ev||event;
divX=iEvent.clientX-oBox.offsetLeft;//这个变量不需要单位px！
divY=iEvent.clientY-oBox.offsetTop;//这个变量不需要单位px！
//document是指onmousemove这个动作是在整个document区域内运动的，相应松开鼠标的时候，也是在document任意地方都可以松开鼠标
document.onmousemove=function(ev){
var iEvent=ev||event;
var left=iEvent.clientX-divX;//这个是鼠标移动到目的地后窗口的position位置放在left这个变量里面
var top=iEvent.clientY-divY;//这个是鼠标移动到目的地后窗口的position位置放在top这个变量里面

if(left<0){
left=0;
}
else if(left>document.documentElement.clientWidth-oBox.offsetWidth){
left=document.documentElement.clientWidth-oBox.offsetWidth;
}
if(top<0){
top=0;
}
else if(top>document.documentElement.clientHeight-oBox.offsetHeight){
top=document.documentElement.clientHeighth-oBox.offsetHeight;
}
oBox.style.left=left+'px';
oBox.style.top=top+'px';
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
return false;//在低版本的火狐浏览器下，第二次拖拽的时候，窗口会有出现鬼影的现象，以此来修复这个bug；
}
}
</script>
<script type="text/javascript" >
这样，窗口就不会被拖出可视区域后拽不回来了

1 0