JS 事件基础 拖拽
来源:互联网 发布:mac mpv播放器 慢放 编辑:程序博客网 时间:2024/05/18 22:40
学习笔记:
拖拽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,要阻止默认事件 } }
0 1
- JS 事件基础 拖拽
- JS之事件基础
- jS事件基础应用
- js事件:Ajax基础
- js事件基础
- js基础 事件基础一
- js基础 事件基础二
- js笔记4-事件基础
- JS基础--事件(1)
- JS基础之写入事件
- JS 事件基础 事件绑定函数
- 03js基础 js事件处理
- 【js基础】JS事件处理程序
- 【js基础】js事件对象学习笔记
- JS基础——事件对象event
- JS基础——事件绑定
- Android-WebApp《基础》-JS触摸事件
- JS 事件基础 跟随鼠标移动
- JavaScript学习笔记二
- 1007. 素数对猜想 (20)
- codeforces_600B. Queries about less or equal elements(排序二分)
- Cocos精灵帧缓存
- [大数据]本地文件拷贝到hdfs
- JS 事件基础 拖拽
- Snmp学习总结(二)-安装Snmp
- 搭建SS
- 程序在内存中的分布
- 马云:湖畔大学主讲失败案例
- Cocos缓存的实现
- web安全
- HDU 1686Oulipo
- 手机卫士 第三天