JavaScript实现拖拽功能的完整代码_javascript交互-js教程-PHP中文网

JavaScript实现拖拽功能的完整代码_javascript交互

betcha

发布： 2025-10-30 11:36:02

原创

216人浏览过

答案：通过监听mousedown、mousemove和mouseup事件，结合getBoundingClientRect计算偏移，实现元素拖拽；代码包含HTML、CSS和JavaScript完整结构，支持鼠标按下开始拖动、移动更新位置、松开结束拖拽，并提供全局事件监听与视觉反馈优化。

javascript实现拖拽功能的完整代码_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>