答案：通过监听mousedown、mousemove和mouseup事件，结合getBoundingClientRect计算偏移，实现元素拖拽；代码包含HTML、CSS和JavaScript完整结构，支持鼠标按下开始拖动、移动更新位置、松开结束拖拽，并提供全局事件监听与视觉反馈优化。
实现拖拽功能在网页开发中很常见，比如拖动元素调整位置、排序或窗口移动等。下面是一个完整的 JavaScript 拖拽功能实现示例，包含 HTML、CSS 和 JavaScript 代码，适用于大多数现代浏览器。
1. 基本原理
拖拽的核心是监听三个事件：
- mousedown：鼠标按下时记录初始位置和元素偏移
- mousemove：鼠标移动时实时更新元素位置
- mouseup：鼠标松开时结束拖拽，移除移动监听
2. 完整可运行代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>JavaScript 拖拽功能实现</title>
<style>
#drag-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
user-select: none;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div id="drag-box">拖我</div>
<p><script>
const dragBox = document.getElementById('drag-box');</p><pre class='brush:php;toolbar:false;'>let isDragging = false;
let offsetX, offsetY;
// 鼠标按下
dragBox.addEventListener('mousedown', function(e) {
isDragging = true;
// 计算鼠标相对于元素左上角的偏移
offsetX = e.clientX - dragBox.getBoundingClientRect().left;
offsetY = e.clientY - dragBox.getBoundingClientRect().top;
// 添加全局监听，防止鼠标移出元素时丢失
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
// 鼠标移动
function onMouseMove(e) {
if (!isDragging) return;
// 计算新位置（减去偏移量）
const newX = e.clientX - offsetX;
const newY = e.clientY - offsetY;
// 更新元素位置
dragBox.style.left = newX + 'px';
dragBox.style.top = newY + 'px';
}
// 鼠标松开
function onMouseUp() {
isDragging = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}</script> </body> </html>
3. 关键细节说明
为了让拖拽更稳定，需要注意以下几点：
立即学习“Java免费学习笔记（深入）”；
-
getBoundingClientRect()：获取元素当前在视口中的位置，比直接读取
offsetLeft/Top更准确 - 全局 mousemove 和 mouseup 监听：绑定到 document 上，避免鼠标移动太快导致脱离目标元素而中断拖拽
- user-select: none：防止拖拽过程中文字被选中
- cursor: move：提供视觉反馈，提示用户该元素可拖动
4. 扩展建议
你可以在此基础上添加更多功能：
- 限制拖拽区域（如不能拖出窗口）
- 拖拽后保存位置到 localStorage
- 支持多个可拖拽元素
- 结合 CSS transition 实现平滑回弹效果
基本上就这些。这个实现不依赖任何框架，纯原生 JavaScript，适合学习和项目集成。
