javascript拖拽实现核心是mousedown记录鼠标相对偏移，mousemove实时计算left/top更新绝对定位，mouseup清理事件；需preventdefault防默认行为，注意滚动偏移与边界限制。
用 JavaScript 实现拖拽元素跟随鼠标移动，核心是利用 mousedown、mousemove 和 mouseup 三个事件配合坐标计算，控制元素的绝对定位（或 transform）实时更新位置。
监听鼠标按下并记录初始偏移
在目标元素上监听 mousedown，获取鼠标相对于元素左上角的偏移量（clientX - element.offsetLeft 等），这个偏移决定了“拖拽时鼠标始终‘按’在元素上的哪个点”。同时给 document 绑定 mousemove 和 mouseup，避免鼠标快速移动出元素区域后丢失事件。
- 把元素设为
position: absolute或position: fixed，否则无法自由移动 - 记录
e.clientX和e.clientY，再减去元素当前offsetLeft/offsetTop得到diffX、diffY - 用
event.preventDefault()防止选中文本或触发默认行为
鼠标移动时实时更新元素位置
在 mousemove 回调中，用当前鼠标坐标减去刚才记录的偏移量，得到元素应处的左上角坐标。直接赋值给 element.style.left 和 style.top 即可（单位记得加 px）。
- 推荐使用
getBoundingClientRect()+pageX/pageY更稳定，尤其在页面滚动时 - 若元素父容器不是
body，需考虑父容器的scrollLeft/scrollTop偏移 - 可加边界限制：比如
Math.max(0, Math.min(maxX, newX))
鼠标松开时清理事件监听
在 mouseup（或 mouseleave）时，移除 document 上的 mousemove 和 mouseup 监听器，防止内存泄漏和误触发。同时可重置 draging = false 状态标志。
- 用同一个函数引用绑定和解绑，不要用匿名函数
- 建议在
mouseup后也监听一次blur或visibilitychange做兜底 - 移动端需额外处理
touchstart/touchmove/touchend
简单可运行示例（含注释）
以下是最小可行代码，复制到 HTML 中即可测试：
<div id="dragger" style="width:100px;height:100px;background:#4CAF50;position:absolute;top:100px;left:100px;cursor:move;">拖我</div>
<p><script>
const el = document.getElementById('dragger');
let isDragging = false;
let diffX = 0, diffY = 0;</script></p><p>const onMouseDown = (e) => {
isDragging = true;
diffX = e.clientX - el.offsetLeft;
diffY = e.clientY - el.offsetTop;
e.preventDefault();
};</p><p>const onMouseMove = (e) => {
if (!isDragging) return;
el.style.left = (e.clientX - diffX) + 'px';
el.style.top = (e.clientY - diffY) + 'px';
};</p><p>const onMouseUp = () => {
isDragging = false;
};</p><p>el.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
