当前位置：首页 > JavaScript

js实现拖拽

2026-01-12 12:52:32JavaScript

实现拖拽的基本步骤

通过监听鼠标事件（mousedown、mousemove、mouseup）实现拖拽功能。以下是核心代码逻辑：

const draggableElement = document.getElementById('draggable');

let isDragging = false;
let offsetX, offsetY;

draggableElement.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
  draggableElement.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  draggableElement.style.left = `${e.clientX - offsetX}px`;
  draggableElement.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  draggableElement.style.cursor = 'grab';
});

CSS 准备工作

确保元素使用绝对定位并设置初始样式：

#draggable {
  position: absolute;
  cursor: grab;
  user-select: none; /* 防止拖动时选中文本 */
}

边界限制处理

防止元素被拖出可视区域：

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

  const x = e.clientX - offsetX;
  const y = e.clientY - offsetY;
  const maxX = window.innerWidth - draggableElement.offsetWidth;
  const maxY = window.innerHeight - draggableElement.offsetHeight;

  draggableElement.style.left = `${Math.max(0, Math.min(x, maxX))}px`;
  draggableElement.style.top = `${Math.max(0, Math.min(y, maxY))}px`;
});

拖拽手柄实现

仅允许特定区域触发拖拽：

const handle = document.querySelector('.drag-handle');
handle.addEventListener('mousedown', startDrag);
// 其余逻辑与基础实现相同

触摸屏适配

添加触摸事件支持：

draggableElement.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  offsetX = touch.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = touch.clientY - draggableElement.getBoundingClientRect().top;
  isDragging = true;
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const touch = e.touches[0];
  draggableElement.style.left = `${touch.clientX - offsetX}px`;
  draggableElement.style.top = `${touch.clientY - offsetY}px`;
});

document.addEventListener('touchend', () => {
  isDragging = false;
});

性能优化建议

使用 transform 代替 top/left 提高性能：

draggableElement.style.transform = `translate(${x}px, ${y}px)`;

添加防抖处理高频触发事件：

js实现拖拽

let lastTime = 0;
document.addEventListener('mousemove', (e) => {
  const now = Date.now();
  if (now - lastTime < 16) return; // 约60fps
  lastTime = now;
  // 拖拽逻辑
});