弹窗拖拽移动与边缘限制的核心是监听鼠标事件、计算位移并动态更新位置，同时校验边界防止越界；仅对标题栏绑定mousedown，记录偏移量，mousemove中计算目标位置并限制在视口内，mouseup后及时解绑事件。
实现弹窗拖拽移动与边缘限制，核心是监听鼠标事件、计算位移、并动态更新弹窗位置，同时在边界处做判断阻止越界。
绑定拖拽事件到弹窗标题栏
不要给整个弹窗绑定拖拽，而是只对标题栏（如 .dialog-header）添加 mousedown 监听。这样更符合用户直觉，也避免误触内容区触发拖拽。
在 mousedown 中记录鼠标按下时的偏移量（clientX/Y 与弹窗当前 left/top 的差值），并绑定 mousemove 和 mouseup 到 document 上，确保拖拽过程不因移出弹窗而中断。
实时计算并更新弹窗位置
在 mousemove 回调中，用当前鼠标坐标减去之前记录的偏移量，得到目标位置：
- newLeft = e.clientX - offsetX
- newTop = e.clientY - offsetY
然后将该位置赋给弹窗的 style.left 和 style.top（注意单位加 px）。为保证定位生效，弹窗需设置 position: absolute 或 fixed。
添加可视区域边缘限制
限制逻辑是在设置新位置前，先对 newLeft 和 newTop 做边界校验：
- 左边界：取
Math.max(0, newLeft)（假设容器是body，且不希望弹窗左边缘超出视口左沿） - 上边界：取
Math.max(0, newTop) - 右边界：取
Math.min(window.innerWidth - dialogWidth, newLeft) - 下边界：取
Math.min(window.innerHeight - dialogHeight, newTop)
其中 dialogWidth 和 dialogHeight 可通过 getBoundingClientRect() 实时获取，确保响应式变化后仍准确。
清理事件防止内存泄漏
每次 mouseup 触发后，必须主动解绑 document 上的 mousemove 和 mouseup，否则会持续监听造成性能问题或异常拖拽。可使用同一函数引用进行移除，或用 once: true 选项简化（但需注意 mousemove 需要持续触发，所以仅 mouseup 适合用 once）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
