通过添加捕捉事件来完成监听偏移量
可以直接下载附件浏览器打开。
没有考虑 IE的兼容问题
<!doctype html>
<html>
<head></head>
<body>
<div style="100px;height:100px;position:absolute;top:0px;left:0px;background-color:red;cursor:default" onmousedown="drag(this,event)">
拖动我
</div>
</body>
<script type="text/javascript">
function drag(element,event) {
// 鼠标起始坐标
var
startX = event.clientX,
startY = event.clientY,
// 元素相对于document的位置
orignX = element.offsetLeft,
orignY = element.offsetTop,
// 获取鼠标相对元素的位置（在mousemove事件中，元素始终保持和鼠标的绝对偏移量不变）
oX = startX - orignX,
oY = startY - orignY;
// 注册监听事件为捕捉(true)，这里事件要传递句柄名称
if(document.addEventListener) {
document.addEventListener('mousemove',moveHandler,true);
document.addEventListener('mouseup',upHandler,true);
}
// 这里定义了两个事件句柄
// 这个e为mousemove事件，不再是mousedown触发的drag
function moveHandler(e) {
element.style.left = e.clientX - oX + 'px';
element.style.top = e.clientY - oY + 'px';
}
//
function upHandler(e) {
document.removeEventListener('mousemove',moveHandler,true);
document.removeEventListener('mouseup',upHandler,true);
}
}
</script>
</html>