js拖拽事件及bug修复

来源：互联网发布：服务器端口编辑：程序博客网时间：2024/05/29 19:43

author：卢~耐

拖拽原理：
三个事件：onmousedown,onmouseover,onmouseup

在firefox下，对象的拖拽bug：阻止默认事件

<!DOCTYPE html><head><meta charset="utf-8" /><title>无标题文档</title><style>#div1 {width:60px; height:60px; background:red; position:absolute;}</style>   <script>      window.onload=function (){var oDiv=document.getElementById('div1');var disX=0;  //鼠标点的水平位置var disY=0;oDiv.onmousedown=function(ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv.offsetLeft;disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=function (ev){//兼容性处理var oEvent=ev||event;var left=oEvent.clientX-disX;var top=oEvent.clientY-disY;<span style="font-family:微软雅黑;">                                        </span>//阻止物体被拖出<span style="font-family:微软雅黑;">可视区</span>if(left<0){   //leftleft=0;//right}else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){left=document.documentElement.clientWidth-oDiv.offsetWidth;}if(top<0){top=0;}else if(top>document.documentElement.clientHeight-oDiv.offsetHeight){top=document.documentElement.clientHeight-oDiv.offsetHeight;}oDiv.style.left=left+'px';oDiv.style.top=top+'px';};document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};//<span style="color:#FF6600;">return false</span>; //firefox};     };  </script></head><body><span style="font-family:微软雅黑;">       </span><div id="div1"></div></body></html>

0 0