在 JavaScript 中实现元素的拖动效果，核心原理是通过监听鼠标事件（或触摸事件）来计算元素的位置变化。以下是详细的实现原理和步骤：

1. 核心事件

拖动需要处理三个关键事件：

• mousedown（按下鼠标）：标记拖动开始，记录初始位置。
• mousemove（移动鼠标）：实时计算元素新位置并更新。
• mouseup（松开鼠标）：结束拖动，移除事件监听。

如果是移动端，对应的事件为 touchstart、touchmove 和 touchend。

2. 实现步骤

2.1 绑定 mousedown 事件

当用户在目标元素上按下鼠标时，记录：

• 鼠标的初始位置（clientX, clientY）。
• 元素的初始位置（offsetLeft, offsetTop）。
• 鼠标相对于元素左上角的偏移量（用于保持拖动时的相对位置）。

element.addEventListener('mousedown', function(e) {
  // 1. 记录初始数据
  const startX = e.clientX;
  const startY = e.clientY;
  const elemLeft = element.offsetLeft;
  const elemTop = element.offsetTop;
  // 2. 计算鼠标在元素内的偏移量
  const offsetX = startX - elemLeft;
  const offsetY = startY - elemTop;
  // 3. 绑定 mousemove 和 mouseup 事件
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
  function onMouseMove(e) {
    // 计算新位置
    const newX = e.clientX - offsetX;
    const newY = e.clientY - offsetY;
    
    // 更新元素位置
    element.style.left = newX + 'px';
    element.style.top = newY + 'px';
  }
  function onMouseUp() {
    // 移除事件监听
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});

2.2 关键细节

• 事件委托到 document：
  将 mousemove 和 mouseup 绑定到 document，而非元素本身。这样即使鼠标快速移动超出元素区域，仍能正常触发事件。

• 性能优化：
  避免在 mousemove 中频繁触发重排（如读取 offsetLeft），提前缓存初始值。

• 边界限制（可选）：
  可添加逻辑限制元素在容器内移动：

  const maxX = container.offsetWidth - element.offsetWidth;
  const maxY = container.offsetHeight - element.offsetHeight;
  newX = Math.max(0, Math.min(newX, maxX));
  newY = Math.max(0, Math.min(newY, maxY));
  

2.3 处理 CSS 定位

• 元素必须设置为 position: absolute 或 position: fixed，才能通过 left 和 top 修改位置。
• 使用 transform: translate() 实现位置变化（性能更优）：

  element.style.transform = `translate(${newX}px, ${newY}px)`;
  

3. 完整代码示例

<div id="draggable" style="position: absolute; left: 0; top: 0;">拖动我</div>
<script>
  const element = document.getElementById('draggable');
  element.addEventListener('mousedown', startDrag);
  function startDrag(e) {
    e.preventDefault();
    
    const startX = e.clientX;
    const startY = e.clientY;
    const elemX = element.offsetLeft;
    const elemY = element.offsetTop;
    const offsetX = startX - elemX;
    const offsetY = startY - elemY;
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', stopDrag);
    function onDrag(e) {
      const newX = e.clientX - offsetX;
      const newY = e.clientY - offsetY;
      element.style.left = newX + 'px';
      element.style.top = newY + 'px';
    }
    function stopDrag() {
      document.removeEventListener('mousemove', onDrag);
      document.removeEventListener('mouseup', stopDrag);
    }
  }
</script>

4. 高级优化

• 防抖（Debounce）：减少 mousemove 事件的触发频率。
• 请求动画帧（RAF）：使用 requestAnimationFrame 优化动画流畅度。
• 触摸事件支持：通过 touchstart/touchmove 兼容移动端。
• 拖拽反馈：添加半透明效果或占位符提升用户体验。

5. 原生拖拽 API 对比

HTML5 提供了原生拖放 API（draggable 属性 + dragstart/dragover 事件），但：

• 优点：支持跨元素拖放、文件拖拽上传。
• 缺点：定制性较差，默认会显示半透明图像。

总结

通过监听鼠标事件、计算偏移量并更新元素位置，可以灵活实现自定义拖拽效果。相比原生 API，手动控制更适用于需要高度定制的场景（如游戏、复杂 UI 组件）。

转自https://juejin.cn/post/7488524321788444723