拖拽元素

结合鼠标事件和位置 API 实现可拖拽元素

实现原理

使用 mousedown、mousemove、mouseup 事件结合 getBoundingClientRect() 实现拖拽功能。 

let isDragging = false;
let startX, startY, initialX, initialY;

element.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;

  const rect = element.getBoundingClientRect();
  initialX = rect.left;
  initialY = rect.top;

  element.classList.add('dragging');
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const dx = e.clientX - startX;
  const dy = e.clientY - startY;

  element.style.left = (initialX + dx) + 'px';
  element.style.top = (initialY + dy) + 'px';
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  element.classList.remove('dragging');
});

示例 1：基础拖拽

在下方区域拖动元素

拖动我

实时位置

X: 50px
Y: 50px

示例 2：限制拖拽范围

元素只能在容器内移动

限制范围

💡 关键点

计算边界时，需要考虑元素自身的宽高。
最小 X = 0，最大 X = 容器宽度 - 元素宽度 

const containerWidth = container.offsetWidth;
const elementWidth = element.offsetWidth;
const maxX = containerWidth - elementWidth;
const maxY = containerHeight - elementHeight;

// 限制位置
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));

总结

  • 使用 mousedown 记录初始位置和鼠标位置
  • mousemove 时计算位移并更新元素位置
  • mouseup 清除拖拽状态
  • 使用 getBoundingClientRect() 获取精确位置
  • 注意边界检测，防止元素移出容器