当前位置：首页 > JavaScript

js实现图片拖动

2026-02-28 22:45:23JavaScript

实现图片拖动的步骤

HTML 结构

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

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

CSS 样式

为图片添加一些基本样式，使其拖动时更直观。

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

JavaScript 逻辑

通过 JavaScript 实现拖动功能，监听 dragstart、dragover 和 drop 事件。

const image = document.getElementById('draggable-image');
let offsetX, offsetY;

image.addEventListener('dragstart', (e) => {
  // 记录鼠标相对于图片的偏移量
  offsetX = e.clientX - image.getBoundingClientRect().left;
  offsetY = e.clientY - image.getBoundingClientRect().top;

  // 设置拖动数据（必须设置，否则拖动无效）
  e.dataTransfer.setData('text/plain', 'dragging-image');
});

document.addEventListener('dragover', (e) => {
  e.preventDefault(); // 允许放置
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  // 更新图片位置
  image.style.left = `${e.clientX - offsetX}px`;
  image.style.top = `${e.clientY - offsetY}px`;
});

优化拖动体验

如果需要更流畅的拖动效果，可以使用 mousedown、mousemove 和 mouseup 事件实现。

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

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

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

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