当前位置：首页 > JavaScript

js实现拖动div

2026-01-30 08:46:42JavaScript

实现拖动 div 的基本思路

通过监听鼠标事件（mousedown、mousemove、mouseup）来实现拖拽功能。需要记录拖拽元素的初始位置和鼠标的初始位置，并在移动时计算偏移量。

基础代码实现

<div id="draggable" style="width: 100px; height: 100px; background: red; position: absolute;"></div>

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

draggable.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - draggable.offsetLeft;
  offsetY = e.clientY - draggable.offsetTop;
});

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;
});

优化边界限制

为了防止拖拽元素超出视口范围，可以添加边界检查逻辑。

js实现拖动div

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

  let left = e.clientX - offsetX;
  let top = e.clientY - offsetY;

  // 限制在视口范围内
  left = Math.max(0, Math.min(left, window.innerWidth - draggable.offsetWidth));
  top = Math.max(0, Math.min(top, window.innerHeight - draggable.offsetHeight));

  draggable.style.left = `${left}px`;
  draggable.style.top = `${top}px`;
});

支持多元素拖拽

如果需要支持多个可拖拽元素，可以为每个元素单独绑定事件。

js实现拖动div

document.querySelectorAll('.draggable').forEach(el => {
  let isDragging = false;
  let offsetX, offsetY;

  el.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - el.offsetLeft;
    offsetY = e.clientY - el.offsetTop;
  });

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

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

使用 CSS 优化拖拽体验

为拖拽元素添加 user-select: none 防止拖拽时选中文本，并添加 cursor: move 提示可拖拽。

.draggable {
  user-select: none;
  cursor: move;
}

兼容移动端触摸事件

如果需要支持移动端，可以添加触摸事件处理。

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

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;
});