兼容Firefox和IE的拖动div块的实现-优快云博客

本文介绍了一个使用JavaScript实现的拖动效果，并解决了不同浏览器下滚动条获取的问题。通过监听鼠标事件实现元素拖拽，同时确保了在Firefox和IE等浏览器下的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个功能主要是用了js的onmousedown、onmousemove、onmouseup、onmouseout几个事件。
并需要理解，FF和IE的offsetX、offsetY的差别。在FF下需要用layerX、layerY来代替offsetX、offsetY，
这两个事件属性是获得鼠标相对于父元素的相对位置。

注意：声明的DOCTYPE会影响document.documentElement.scrollTop和document.documentElement.scrollLeft的取值，
本人在网上找的解决方案如下：
关于js中 document.body.scrollTop 不能返回正确值的原因
本来是为了通过 document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，
造成这样的原因和 html的头部声明有关，如果头部声明为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，
这样肯定得到的结果是 0，如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种
1、var scrollPos; if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
} else if (typeof document.body != 'undefined')
{
scrollPos = document.body.scrollTop;
}
　2、用document.documentElement.scrollTop 替代 document.body.scrollTop

本人的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:script language=javascript></mce:script> </head> <body> <div id="movedivid" style="z-index:9999;position: absolute; left: 245px; top:130px;width:300px;height:200px;background:#cccccc;cursor:move;" onmousedown="Onmousedrag.mousedown(event);" onmousemove="Onmousedrag.mousemove(event);" onmouseup="Onmousedrag.mouseup();"onmouseout="Onmousedrag.mouseout();"> test text </div> <div style="OVERFLOW:scroll;white-space:nowrap;text-overflow:ellipsis; width:200p;"> ads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads dadads </div> </body> </html>

其中chrome游览器支持的是这种方式获得滚动的距离的

window.pageYOffset

那么把

var scrollX = document.documentElement.scrollLeft;

ar scrollY = document.documentElement.scrollTop;

改成下面这种，就支持这三种游览器了，呵呵！