当前位置：首页 > JavaScript

js实现div拖动

2026-04-04 01:58:54JavaScript

实现div拖动的步骤

监听鼠标事件

为需要拖动的div元素添加mousedown事件监听器，记录初始位置和鼠标位置。同时添加mousemove和mouseup事件到document对象，避免鼠标移动过快脱离元素范围。

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

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

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

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

CSS样式准备

确保div具有position: absolute或position: fixed属性，并设置初始位置。添加cursor样式提升用户体验。

js实现div拖动

#draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  cursor: grab;
  user-select: none;
}

边界限制

添加逻辑限制拖动范围，防止元素被拖出可视区域。

js实现div拖动

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

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

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

触摸屏支持

添加touch事件处理实现移动端兼容。

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

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

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

性能优化

使用transform代替top/left提升动画性能，减少重排。

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