JavaScript如何实现可拖动模态框

这篇文章将为大家详细讲解有关JavaScript如何实现可拖动模态框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

代码：

HTML代码部分：

    
点击，弹出登录框
    
        
登录会员关闭
        
            
                用户名:                            
            
                登录密码:                            
        
        
登录会员
    
    

JS部分：

效果演示：

思路：

给可拖动部分添加点击事件，触发时计算鼠标在可拖动部分中的坐标（ e.pageX - box.offsetLeft ），得到 x y ，然后给 document 添加鼠标移动事件，因为当鼠标拖动模态框的时候，是在整个DOM窗口内移动的。保持鼠标与模态框的相对位置不变，所以需要计算此时的模态框的位置（e.pageX - x ），进而修改模态框位置。当鼠标弹起时，清除移动事件即可。

关于"JavaScript如何实现可拖动模态框"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。