如何实现拖拽功能？

实现原生DOM元素的拖拽是一个经典的前端交互。其核心在于监听三个鼠标事件：mousedown、mousemove和mouseup，并通过计算鼠标偏移量来动态更新元素位置。

基础实现原理

首先，在可拖拽元素上监听mousedown事件。当用户按下鼠标时，记录初始位置并开始监听全局的mousemove和mouseup事件。

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', startDrag);

function startDrag(e) {
  isDragging = true;
  // 计算鼠标按下点相对于元素左上角的偏移
  const rect = draggable.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;

  // 监听全局事件
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
}

使用全局监听可以确保即使鼠标快速移出元素外，拖拽也不会中断。

处理拖拽移动

在mousemove事件处理函数中，根据当前鼠标位置和之前记录的偏移量，计算元素的新位置，并更新其样式。

function onDrag(e) {
  if (!isDragging) return;
  // 计算元素新的 left 和 top 值（相对于视口）
  const x = e.clientX - offsetX;
  const y = e.clientY - offsetY;

  draggable.style.position = 'fixed'; // 或 absolute，取决于需求
  draggable.style.left = x + 'px';
  draggable.style.top = y + 'px';
}

这里使用fixed定位使元素相对于视口移动，避免受父级定位影响。你也可以根据布局需求使用absolute定位。

结束拖拽与清理

当用户释放鼠标（mouseup）时，移除全局的事件监听器，并将拖拽状态重置。

function stopDrag() {
  isDragging = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
}

这一步至关重要，它防止了在非拖拽状态下mousemove事件处理器被意外调用。

考虑边界与约束

一个更健壮的实现通常需要限制拖拽范围。你可以在onDrag函数中添加边界检查。

function onDrag(e) {
  if (!isDragging) return;
  let x = e.clientX - offsetX;
  let y = e.clientY - offsetY;

  // 简单的视口边界约束
  const maxX = window.innerWidth - draggable.offsetWidth;
  const maxY = window.innerHeight - draggable.offsetHeight;
  x = Math.max(0, Math.min(x, maxX));
  y = Math.max(0, Math.min(y, maxY));

  draggable.style.left = x + 'px';
  draggable.style.top = y + 'px';
}

对于更复杂的拖拽（如排序列表、拖放文件），HTML5提供了原生的Drag and Drop API，它更强大但API也相对复杂。上述手动实现的方式提供了最大的灵活性和可控性，是理解拖拽机制的基础。在实际项目中，记得处理user-select样式以防止拖拽时意外选中文本，并考虑触摸事件以实现移动端兼容。