javascript_如何实现拖拽功能-js教程-PHP中文网

javascript_如何实现拖拽功能

夜晨

发布： 2025-12-02 19:58:02

原创

756人浏览过

答案：JavaScript拖拽通过监听mousedown、mousemove和mouseup事件实现，元素需设为position: absolute；按下时记录鼠标偏移并标记拖动状态，移动时根据偏移实时更新位置，松开时结束状态。绑定事件到document可防止脱离，配合preventDefault和样式优化可提升体验。

javascript_如何实现拖拽功能

JavaScript 实现拖拽功能主要通过监听鼠标事件来完成，包括 mousedown、mousemove 和 mouseup 三个关键事件。下面介绍一个基础但完整的实现方式，适用于大多数 DOM 元素。

1. 拖拽的基本原理

拖拽的核心逻辑是：

用户按下鼠标（mousedown）时，记录起始位置，并标记元素为“可拖动”状态
移动鼠标（mousemove）时，如果处于“可拖动”状态，就实时更新元素的位置
松开鼠标（mouseup）时，结束拖动，清除状态

2. HTML 结构示例

<div id="draggable" style="width:100px; height:100px; background:red; position:absolute;">
  拖我
</div>

登录后复制

注意：被拖动的元素必须设置 position: absolute，才能通过 top 和 left 控制位置。

3. JavaScript 实现代码

以下是完整 JS 实现：

js实现的简单拖拽功能

查看详情

立即学习“Java免费学习笔记（深入）”；

const draggable = document.getElementById('draggable');
<p>let isDragging = false;
let offsetX, offsetY;</p><p>// 鼠标按下，准备拖动
draggable.addEventListener('mousedown', (e) => {
isDragging = true;
// 计算鼠标在元素内的偏移
offsetX = e.clientX - draggable.offsetLeft;
offsetY = e.clientY - draggable.offsetTop;
draggable.style.cursor = 'grabbing';
});</p><p>// 鼠标移动，执行拖动
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
// 计算新位置
draggable.style.left = <code>${e.clientX - offsetX}px</code>;
draggable.style.top = <code>${e.clientY - offsetY}px</code>;
});</p><p>// 鼠标松开，结束拖动
document.addEventListener('mouseup', () => {
isDragging = false;
draggable.style.cursor = 'grab';
});</p>

登录后复制