本文介绍了使用JavaScript实现Div层拖拽移动及坐标获取的具体代码。通过监听mousedown、mousemove和mouseup事件，结合setCapture方法，动态计算鼠标偏移量并更新层的位置。同时展示了如何在不同分辨率下通过相对与绝对定位结合，确保图层布局的稳定性。
JavaScript层拖拽核心逻辑
具体实现代码如下：
定义变量 x, y, z, down 以及对象 obj，其中 down 初始值为 false。
定义初始化函数 init()：
将触发事件的目标元素赋值给 obj。
调用 obj.setCapture() 方法，确保鼠标事件仅由当前对象捕获。
读取 obj.style.zIndex 的值并保存至变量 z，用于后续恢复层级。
注释说明：将当前层的 z-index 设置为 100，使其显示在其他层之上。
执行 obj.style.zIndex = 100。
获取鼠标指针相对于触发事件对象的 X 轴坐标，存入变量 x。
获取鼠标指针相对于触发事件对象的 Y 轴坐标，存入变量 y。
将 down 设置为 true，标记鼠标已按下。
}
定义移动函数 moveit()：
判断条件：确保鼠标处于按下状态（down 为 true），且当前触发事件的对象与初始对象 obj 一致。
if (down && event.srcElement == obj) {
使用 with(obj.style) 块操作样式属性：
注释说明：计算 X 轴位置，即文档水平滚动距离加上当前鼠标相对于文档的 X 坐标，再减去按下时的相对偏移量。
注释掉的代码：posLeft = event.x - x;
实际赋值：posLeft = document.body.scrollLeft + event.x - x;
注释说明：计算 Y 轴位置，即文档垂直滚动距离加上当前鼠标相对于文档的 Y 坐标，再减去按下时的相对偏移量。
注释掉的代码：posTop = event.y - y;
实际赋值：posTop = document.body.scrollTop + event.y - y;
在状态栏显示 posLeft 和 posTop 的值。
window.status=window.status+"clientX="+event.clientX+"clientY="+event.clientY+"scrollLeft="+document.body.scrollLeft+"scrollTop="+document.body.scrollTop+",event.y="+event.y+",event.x"+event.x;
}
}
}
定义停止拖拽函数 stopdrag()：
注释说明：当 onmouseup 事件触发时，表示鼠标松开，将 down 设为 false。
执行 down = false。
将 obj.style.zIndex 恢复为初始保存的 z 值。
调用 obj.releaseCapture() 释放鼠标捕捉。
注释掉的代码：alert("X:"+obj.style.left+";Y:"+obj.style.top);
} 2:为了使图层在不同分辨率浏览器上显示同样的效果，我们需要对图层定位设置
第一步：对最外层 进行相对定位
HTML结构与定位设置
HTML 结构示例代码如下：
<div id="t" style="position:relative;top:0px;left:0px;"> </div>第二步：在相对里面进行决对定位(这样图层就不会随着分辨率的改变而变形)
嵌套 Div 结构示例代码如下：
<div id="t" style="position:relative;top:0px;left:0px;">
<div id="tt" style="position:absolute;top:9px;left:317px;">
<IMG id="hong" SRC="main/1.jpg" WIDTH="8" HEIGHT="8" BORDER="0"
ALT="" />
</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>//===================（层移动方法调用）=============================
HTML 事件绑定代码如下：
<div onmousedown=init() onmousemove=moveit()
onmouseup=stopdrag()
style="position:absolute;left:60;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;">
D
</div>
</div>