本文详细介绍如何使用JavaScript实现模态框的拖拽功能。通过监听mousedown、mousemove和mouseup事件，结合鼠标坐标与元素偏移量的计算，实现模态框跟随鼠标移动的效果。文章包含完整的HTML结构、CSS样式及JS逻辑代码，适合前端初学者参考学习。
模态框拖拽功能概述
本文分享了一个使用JavaScript实现模态框拖拽效果的具体代码示例，供读者参考学习。
在之前的JavaScript学习中，遇到了一个具体需求：当鼠标按下并移动时，模态框需跟随鼠标移动；当鼠标松开后，模态框停止移动。完整的实现代码将在文末提供。
实现思路与逻辑分析
实现该功能的核心思路如下：
1. 点击弹出层按钮时，模态框和遮罩层的display属性设置为block，使其显示。2. 点击关闭按钮时，将模态框和遮罩层的display属性设置为none，使其隐藏。
3. 页面拖拽的基本流程为：鼠标按下并移动，随后松开鼠标。4. 涉及的关键事件包括：鼠标按下（mousedown）、鼠标移动（mousemove）和鼠标松开（mouseup）。5. 在拖拽过程中，通过实时更新模态框的left和top值，使其跟随鼠标位置移动。6. 触发拖拽事件的源元素为模态框的最上方标题栏，即只有鼠标位于该区域时才能触发事件，其他区域无效。7. 模态框的实际位置计算公式为：鼠标坐标减去鼠标在模态框内部的坐标。由于模态框位置动态变化，仅首次能直接获取其left和top值，因此需通过“鼠标坐标 - 鼠标在模态框内的坐标”来计算当前正确位置。
8. 在鼠标按下事件中，需计算并记录鼠标相对于模态框左上角的偏移坐标。9. 在鼠标移动事件中，将模态框的坐标设置为：当前鼠标坐标减去步骤8中得到的偏移坐标。注意，移动事件的处理逻辑需嵌套在按下事件内部。10. 当鼠标松开时，停止拖拽行为，具体做法是移除mousemove事件监听器。
JavaScript代码实现
以下是具体的代码实现部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框拖拽</title>
<style>
* {
margin: 0;
padding: 0;
}
#link {
color: #000;
text-decoration: none;
border: 1px solid #000;
}
.login {
width: 300px;
height: 200px;
background-color: antiquewhite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: none;
}
.login-title {
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
background-color: aqua;
cursor: move;
}
.login-title span {
display: block;
height: 30px;
width: 30px;
background-color: antiquewhite;
line-height: 30px;
border-radius: 50%;
position: absolute;
top: -10px;
right: -10px;
font-size: 12px;
}
.login-title span a {
text-decoration: none;
color: #000;
}
.login-input-content {
margin: 15px 20px 0;
line-height: 30px;
}
.login-button {
width: 200px;
height: 20px;
margin: 10px auto;
border: 1px solid rgb(77, 73, 73);
text-align: center;
}
.login-button a {
text-decoration: none;
color: #000;
font-size: 14px;
}
#bg {
display: none;
background-color: #000;
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="login-header"><a href="javascript:;" id="link">点击，弹出登录框</a></div>
<div class="login" id="login">
<div class="login-title">登录会员
<span><a id="colseBth" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label for="">用 户 名：</label>
<input type="text" placeholder="请输入用户名" name="info[sername]" id="username" class="username">
</div>
<div class="login-inpit">
<label for="">登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password">
</div>
</div>
<div class="login-button" id="loginBtn"><a href="javascript:void(0);" id="login-button-submit">会员登录</a></div>
</div>
<!-- 遮罩层 -->
<div class="login-bg" id="bg"></div>
</body>
<script>
// 1.点击,弹出模态框和遮罩层
// 3.点击关闭模态框和遮罩层自动隐藏
// 4.页面拖拽原理：鼠标按下且移动，之后松开鼠标
// 5.拖拽过程：鼠标移动的时候获得新的值赋值给模态框的left和top值。
//1.获取DOM元素
var oLink = document.querySelector('#link');
var oLogin = document.querySelector('.login');
var oBg = document.querySelector('#bg');
var oClose = oLogin.querySelector('#colseBth');
var title = oLogin.querySelector('.login-title');
//2.点击弹出层这个链接link，让mask和login显示出来
oLink.addEventListener('click', function () {
oLogin.style.display = 'block';
oBg.style.display = 'block';
})
//3.点击closeBtn就隐藏mask和login
oClose.addEventListener('click', function () {
oLogin.style.display = 'none';
oBg.style.display = 'none';
})
//4.开始拖拽
//（1）当我们鼠标按下，就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - oLogin.offsetLeft;
var y = e.pageY - oLogin.offsetTop;
console.log(x, y)
//（2）鼠标移动的时候，把鼠标在页面中的坐标 减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
oLogin.style.left = e.pageX - x + 'px';
oLogin.style.top = e.pageY - y + 'px';
}
//(3)鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
</script>
</html>以上就是本文的全部内容，希望能为读者的学习提供帮助，也欢迎大家继续支持本站。