JavaScript 实现拖拽功能

问题

如何使用原生 JavaScript 实现元素的拖拽功能？

解答

拖拽过程分为三个步骤，分别对应三个鼠标事件：

1. mousedown - 鼠标按下目标元素
2. mousemove - 鼠标保持按下状态并移动
3. mouseup - 鼠标抬起，结束拖拽

实现代码

const dragElement = document.querySelector('.draggable');
let isDragging = false;
let startX, startY;

// 鼠标按下
dragElement.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - dragElement.offsetLeft;
  startY = e.clientY - dragElement.offsetTop;
  dragElement.style.cursor = 'grabbing';
});

// 鼠标移动
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  const x = e.clientX - startX;
  const y = e.clientY - startY;
  
  dragElement.style.left = x + 'px';
  dragElement.style.top = y + 'px';
});

// 鼠标抬起
document.addEventListener('mouseup', () => {
  isDragging = false;
  dragElement.style.cursor = 'grab';
});

CSS 配置

.draggable {
  position: absolute;
  cursor: grab;
}

关键点

• 使用 isDragging 标识来控制拖拽状态，只在鼠标按下时才响应移动
• 在 mousedown 中记录鼠标相对元素的初始位置（startX、startY）
• 在 mousemove 中计算元素新位置 = 当前鼠标位置 - 初始偏移量
• mousemove 和 mouseup 需要绑定在 document 上，防止鼠标移出元素时失效
• 拖拽元素需要设置 position: absolute 才能通过 left/top 定位