JS实现兼容IE与Firefox的拖动层功能详解
本文提供了一段完全兼容IE与Firefox浏览器的JavaScript拖动层代码。通过处理mousedown、mousemove和mouseup事件，利用event与window.event的兼容性判断，实现了跨浏览器的元素拖拽功能。代码包含HTML结构定义及完整的JS逻辑，适用于需要兼容老旧浏览器的Web开发场景。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>zhou's html</title> </head> <body> 一共三个层,下面还有一个,把他拖上来 <div id="test" style='cursor:move;border:6px solid #000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center'><span>Magnolia Mag.nolia</span><input type="text" style="width:50px" maxlength="5"/></div> <div id="test1" style='cursor:move;border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>Mozilla Red</span><input type="text" style="width:80px" maxlength="9"/></div> <div id="test3" style="border:3px solid #C3D9FF;text-align:center;left:700px;top:100px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test31" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#C3D9FF;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小 纸 条</div>一共三个层,下面还有一个,把他拖上来<textarea style="width:130px;height:150px;">有了拖动层,做局部拖动很简单</textarea><input type="button" value="submit it"/></div> <div id="test4" style="border:3px solid #CDEB8B;text-align:center;left:480px;top:150px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test41" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#CDEB8B;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小 纸 条</div>一共三个层,下面还有一个,把他拖上来<textarea style="width:130px;height:150px;">顺便练习下颜色搭配</textarea><input type="button" value="submit it"/></div> <div id="test2" style='cursor:move;border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shiny silver</span><input type="button" value="hit me"/></div> <script type="text/javascript" charset="utf-8"> var $=function(id){return document.getElementById(id)}; Array.prototype.extend=function(C){for(var B=0,A=C.length;B </body> </html>注意：若需引入外部JS文件，刷新页面后方可执行。
下文提供相关参考内容，也可直接查看上方代码。
HTML结构定义
首先添加一个div层。
代码如下：
<div id='pop-editor' style='width: 520px;height:430px;border:1px solid red;position: absolute;left:100px;top:200px;' onmousedown='down(event)' onmouseup='up()'>asdfdsf</div>JavaScript核心逻辑
JavaScript代码如下：
代码如下：
var posX;
var posY;
var popDiv;
var dragable;
function down(e){
popDiv = document.getElementById("pop-editor");
e = e || window.event; //如果是IE
posX = e.clientX - parseInt(popDiv.style.left);
posY = e.clientY - parseInt(popDiv.style.top);
dragable = true;
document.onmousemove = move;
}
function move(ev){
if(dragable == true){
ev = ev || window.event;//如果是IE
popDiv.style.left = (ev.clientX - posX) + "px";
popDiv.style.top = (ev.clientY - posY) + "px";
}
}
function up(){
dragable = false;
} 浏览器兼容性说明
此方案已兼容IE与Firefox，其他浏览器未进行测试。在IE环境中，event对象无需显式调用，可直接使用window.event；而在Firefox中，必须显式传递event参数，即在调用函数时传入event（如down(event)），并在函数内部通过ev = ev || window.event进行判断。若为IE，ev即为window.event；若为Firefox，ev则为event对象，从而实现跨浏览器兼容。
补充说明：在div中需设置left、top及position属性，且position必须为absolute（绝对定位）。
js-cookie 安装与基础用法：set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目：制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？
2026-11-05 09:37:58