JavaScript之修复拖拽的bug

来源：互联网发布：汽车保养小知识知多少编辑：程序博客网时间：2024/06/16 15:09

简易的拖拽

需要用到的对象和事件:

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用，函数不会在事件发生前被执行！

Event 对象的产生当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.

onmousedown<鼠标按下时不放时触发>

onmousemove<鼠标每移动一个像素点时触发>

onmouseup <鼠标按下后松开时触发>

简易拖拽的原理图

JavaScript简易拖拽原理图

JavaScript简易拖拽代码:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><!--盒子的样式--><style type="text/css">*{margin: 0;padding: 0;}#box{width: 100px; height: 100px; background:aqua; border: 1px solid orchid; box-sizing: border-box; position: absolute;}</style><!--简易拖拽js的代码块--><script type="text/javascript">//加载完整个页面后执行右边的函数window.onload=function (){//通过ID找到元素var oBox=document.getElementById('box');//先声明作用域较大的数字类型//代表X轴   是盒子当前的鼠标的X轴距的离减去盒子的距离左部的距离得到var disX=0;//代表Y轴   是盒子当前的鼠标的Y轴距的离减去盒子的距离头部的距离得到var disY=0;//onmousedown 事件  当鼠标按下不放触发//形参ev是当前事件需要向浏览器返回值oBox.onmousedown=function (ev){//event对象 兼容性写法var iEvent=ev || event;//是盒子当前的鼠标的X轴距的离减去盒子的距离左部的距离得到disX=iEvent.clientX-oBox.offsetLeft;//是盒子当前的鼠标的Y轴距的离减去盒子的距离头部的距离得到disY=iEvent.clientY-oBox.offsetTop;//鼠标移动一像素触发  onmousemove  为了作用域变大 所以加入document 在整个页面移动都有效document.onmousemove=function (ev){var iEvent=ev || event;//距离左边的值是当前鼠标的值坐标值减去  鼠标距离盒子的边缘的值加像素oBox.style.left=iEvent.clientX-disX+'px';oBox.style.top =iEvent.clientY-disY+'px';};//当在页面按下并且松开鼠标时 触发执行  让鼠标按下的事件 和鼠标移动的事件为空document.onmouseup=function (){document.onmousedown=null;document.onmousemove=null;};return false;  //修复低版本的火狐浏览器 拖拽的时候出现残影的问题  这里忽略不计 };};</script></head><body><div id="box"></div></body></html>

书写拖拽盒子中存在的bug <已解决>

1、当鼠标按下的时候触发onmousedown事件鼠标按下触发那么这时候我们需要移动因为是想达到效果是鼠标按下拖拽着盒子进行移动,那么就要用到onmousemove事件鼠标每移动一像素,那么就会触发当前事件, 但是如果设置作用域在盒子自身的身上的话,很明显鼠标很容易就移出到盒子的外面, 那时这个事件就无法继续执行了. 所以为了作用域的问题 onmousemove 事件必须写在页面最大的作用域 document 这整个网页文件最大的隐性元素节点移动在整个页面中都有作用.

2、跟随着上面的bug是这时我们如果onmousemove事件写在onmousedown外面并级的时候我们会发现根本不用鼠标按下,盒子就会跟着我们移动,因为很明显我们是对整个页面鼠标移动时做的触发事件. 修复是把当前onmousemove鼠标移动每一像素的事件写在 onmousedown 鼠标按下执行触发事件的里面这样当鼠标按下不松的情况下我们可以拖动盒子了

3、第三个是bug是鼠标按下移动盒子,这一切都没有问题了,但是我们发现就算我们松开鼠标盒子还是跟随着鼠标的移动因为事件一直执行着鼠标每移动一像素触发的事件onmousemove 的代码块这时候我们需要停止这些事件所以修复bug的话必须设置鼠标松开事件 onmouseup 当鼠标松开时触发这时候我们让 onmousedown 事件为空 null 并且让 onmousemove 事件都为空 null 就会修复这个bug 让鼠标松开按键后盒子不再跟着移动。

4、修复在低版本火狐浏览器在拖动时会出现盒子本身移动时带有残影的bug . 只需要在鼠标按下事件onmousedown 的最后一行中加入 return false;

这时我们可以看到以上代码基本上实现了当鼠标在盒子上按下不送鼠标按键并且移动的时候,盒子跟随着鼠标移动.并且在松开鼠标后盒子不再跟着移动.

5、这个时候我们会发现可以实现在鼠标按下的时候拖拽移动盒子的效果了, 但是盒子可以任意被鼠标拖拽移动包括移动到浏览器页面外面 <这很明显不符合我们的需要了>

修复bug的代码如下:

<!--简易拖拽js的代码块--><script type="text/javascript">//加载完整个页面后执行右边的函数window.onload=function (){//通过ID找到元素var oBox=document.getElementById('box');//先声明作用域较大的数字类型//代表X轴   是盒子当前的鼠标的X轴距的离减去盒子的距离左部的距离得到var disX=0;//代表Y轴   是盒子当前的鼠标的Y轴距的离减去盒子的距离头部的距离得到var disY=0;//onmousedown 事件  当鼠标按下不放触发//形参ev是当前事件需要向浏览器返回值oBox.onmousedown=function (ev){//event对象 兼容性写法var iEvent=ev || event;//是盒子当前的鼠标的X轴距的离减去盒子的距离左部的距离得到disX=iEvent.clientX-oBox.offsetLeft;//是盒子当前的鼠标的Y轴距的离减去盒子的距离头部的距离得到disY=iEvent.clientY-oBox.offsetTop;//鼠标移动一像素触发  onmousemove  为了作用域变大 所以加入document 在整个页面移动都有效document.onmousemove=function (ev){var iEvent=ev || event;//为了可以实现方便对比 我们创建一个变量 来储存鼠标当前的距离 减去鼠标在盒子中间时距离盒子边缘的值var Left=iEvent.clientX-disX;var Top=iEvent.clientY-disY;//限制盒子不能移出浏览器外  判断//当盒子距离左边的值小于 即超出0时让盒子距离左边的值等于零if(Left<0){  //不能出左边Left=0;}//不能出右边//当盒子距离右边的值大于  整个页面的宽度减去盒子自身的宽度else if(Left>document.documentElement.clientWidth-oBox.offsetWidth){  //盒子不能出右边//就让盒子距离左边的距离是当前页面的宽度减去盒子自身的值  <限制在整个页面>Left=document.documentElement.clientWidth-oBox.offsetWidth;}else if(Top<0){ //不能出头部Top=0;}//当盒子距离上面的值大于 整个页面高度减去盒子自身的高度时 else if(Top>document.documentElement.clientHeight-oBox.offsetHeight){//让盒子距离顶部的距离 等于页面可视化界面的高度减去盒子自身高度Top=document.documentElement.clientHeight-oBox.offsetHeight;}//距离左边的值是当前鼠标的值坐标值减去  鼠标距离盒子的边缘的值加像素oBox.style.left=Left+'px';oBox.style.top =Top +'px';};//当在页面按下并且松开鼠标时 触发执行  让鼠标按下的事件 和鼠标移动的事件为空document.onmouseup=function (){document.onmousedown=null;document.onmousemove=null;};return false;  //修复低版本的火狐浏览器 拖拽的时候出现残影的问题  这里忽略不计 };};</script>

到此我们修复了盒子能脱出浏览器外的bug了.

秦卿著

2 0