当前位置：首页 > JavaScript

js实现div拖动

2026-03-01 01:25:54JavaScript

实现div拖动的基本思路

通过监听鼠标事件（mousedown、mousemove、mouseup）来实现拖动效果。核心逻辑是记录初始位置偏移量，并在移动时更新元素位置。

基础实现代码

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

let isDragging = false;
let offsetX, offsetY;

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

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

  draggableDiv.style.left = `${e.clientX - offsetX}px`;
  draggableDiv.style.top = `${e.clientY - offsetY}px`;
});

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

CSS准备

确保div有position属性且初始位置设置：

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 - draggableDiv.offsetWidth;
  const maxY = window.innerHeight - draggableDiv.offsetHeight;

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

性能优化版本

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

let posX = 0, posY = 0;

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

  posX = e.clientX - offsetX;
  posY = e.clientY - offsetY;

  draggableDiv.style.transform = `translate(${posX}px, ${posY}px)`;
});

完整封装函数

可复用的拖动初始化函数：

function makeDraggable(element) {
  let isDragging = false;
  let offsetX, offsetY;

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

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

    element.style.left = `${e.clientX - offsetX}px`;
    element.style.top = `${e.clientY - offsetY}px`;
  });

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