当前位置：首页 > JavaScript

js实现图片的拖动

2026-01-16 13:18:42JavaScript

实现图片拖动的步骤

HTML 结构 在 HTML 中创建一个可拖动的图片元素，确保设置 draggable 属性为 true。

<img id="draggable-img" src="image.jpg" draggable="true">

CSS 样式 为图片添加基本样式，确保拖动时视觉效果清晰。

js实现图片的拖动

#draggable-img {
  position: absolute;
  cursor: move;
}

JavaScript 逻辑 通过事件监听实现拖动功能，记录初始位置并更新图片坐标。

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

img.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - img.getBoundingClientRect().left;
  offsetY = e.clientY - img.getBoundingClientRect().top;
  img.style.zIndex = 1000; // 确保拖动时图片在最上层
});

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

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

优化拖动体验

限制拖动范围：通过判断边界值防止图片被拖出可视区域。

js实现图片的拖动

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const x = e.clientX - offsetX;
  const y = e.clientY - offsetY;
  const maxX = window.innerWidth - img.width;
  const maxY = window.innerHeight - img.height;

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

平滑动画：添加过渡效果使拖动更流畅。
```
#draggable-img {
  transition: transform 0.1s ease;
}
```

兼容触摸设备

为支持移动端触摸事件，需添加 touchstart、touchmove 和 touchend 事件。

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

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

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