当前位置：首页 > JavaScript

js实现拖动

2026-04-07 01:56:31JavaScript

实现拖动的核心步骤

监听三个关键事件：mousedown、mousemove 和 mouseup。通过事件对象获取鼠标位置，动态修改元素坐标实现拖动效果。

const draggableElement = document.getElementById('drag-item');
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';
});

边界限制处理

防止元素被拖出可视区域，添加边界检测逻辑：

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

触摸屏适配方案

为支持移动端触摸操作，需添加对应触摸事件：

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

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`;
  e.preventDefault();
});

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

性能优化建议

使用CSS transform替代直接修改top/left属性，触发GPU加速：

// 替换mousemove事件内的代码
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;
  // 拖动逻辑...
});

完整示例代码

<!DOCTYPE html>
<div id="drag-item" style="width:100px;height:100px;background:red;position:absolute;"></div>

<script>
  const element = document.getElementById('drag-item');
  let isDragging = false;
  let offsetX, offsetY;

  element.addEventListener('mousedown', startDrag);
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', endDrag);

  function startDrag(e) {
    isDragging = true;
    offsetX = e.clientX - element.getBoundingClientRect().left;
    offsetY = e.clientY - element.getBoundingClientRect().top;
    element.style.cursor = 'grabbing';
  }

  function drag(e) {
    if (!isDragging) return;
    element.style.left = `${e.clientX - offsetX}px`;
    element.style.top = `${e.clientY - offsetY}px`;
  }

  function endDrag() {
    isDragging = false;
    element.style.cursor = 'grab';
  }
</script>