如何用JS编写一个可拖动的模态框？

本文共计1466个文字，预计阅读时间需要6分钟。

原文示例为：本文字例为家庭分享了JS实现简单可拖动的模式的整体代码，供大家参考。具体内容如下+这篇博文有+简单实现+和+带样式且微复杂一点的+的两个版本+：+实现思路：+“

简化后内容：本文字例分享JS实现简单拖动模式的代码，供参考。内容包含简单版和带样式版两个版本：实现思路：

本文实例为大家分享了JS实现简单可拖动的模态框的具体代码，供大家参考，具体内容如下

这篇博文有 简单实现 和 带样式且稍微复杂一点 的两个版本

简单版本

效果图：

实现思路：

给可拖动部分添加点击事件，触发时计算鼠标在可拖动部分中的坐标（ e.pageX - box.offsetLeft ），得到 x y 。

给 document 添加鼠标移动事件，因为当鼠标拖动模态框的时候，是在整个DOM窗口内移动的。保持鼠标与模态框的相对位置不变，所以需要计算此时的模态框的位置（e.pageX - x ），进而修改模态框位置。此时的 e.pageX 已经发生变化，跟上述的 e.pageX 是不相等的。

当鼠标弹起时，清除移动事件即可。

代码注意点：

1 offsetWidth 这类offset属性是只读属性，不能通过对其进行赋值来修改元素。