JS 事件基础 拖拽
2016-03-28 16:01
866 查看
学习笔记:
拖拽div要发生三个事件:1.鼠标按下onmousedown; 2.鼠标移动onmousemove; 3.鼠标松开onmouseup;
注意事项:(1)要防止div移出可视框,要限制div移动的横纵坐标;
(2)防止火狐的bug, 要在最后写上return false,阻止默认事件;
(3)防止鼠标运动时移出div,所以要用document.onmousemove和document.onmouseup,不能用oDiv.onmousemove;
拖拽div要发生三个事件:1.鼠标按下onmousedown; 2.鼠标移动onmousemove; 3.鼠标松开onmouseup;
注意事项:(1)要防止div移出可视框,要限制div移动的横纵坐标;
(2)防止火狐的bug, 要在最后写上return false,阻止默认事件;
(3)防止鼠标运动时移出div,所以要用document.onmousemove和document.onmouseup,不能用oDiv.onmousemove;
<script> window.onload=function() { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; //封装一个函数用于获取鼠标坐标 function getPos(ev) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } oDiv.onmousedown=function(ev) { var oEvent=ev||event; var pos=getPos(oEvent); //这样就可以获取鼠标坐标,比如pos.x表示鼠标横坐标 disX=pos.x-oDiv.offsetLeft; disY=pos.y-oDiv.offsetTop; document.onmousemove=function(ev) /*由于要防止鼠标滑动太快跑出div,这里应该用document. 因为触发onmousemove时要重新获取鼠标的坐标,不能使用父函数上的pos.x和pos.y,所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/ { var oEvent=ev||event; var pos=getPos(oEvent); //防止div跑出可视框 var l=pos.x-disX; var t=pos.y-disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) { l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) { t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; } document.onmouseup=function(ev) { document.onmousemove=null; //将move清除 document.onmouseup=null; } return false; //火狐的bug,要阻止默认事件 } }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享