当前位置：首页 > JavaScript

js实现图片拖拽

2026-04-03 23:31:59JavaScript

实现图片拖拽的基本步骤

在JavaScript中实现图片拖拽功能需要利用HTML5的拖放API。以下是实现的核心步骤：

HTML结构准备

js实现图片拖拽

<div id="dropArea" style="width: 500px; height: 300px; border: 2px dashed #ccc;">
  <p>拖拽图片到此处</p>
</div>
<img id="draggableImage" src="example.jpg" draggable="true" width="100">

JavaScript事件监听

const draggableImage = document.getElementById('draggableImage');
const dropArea = document.getElementById('dropArea');

// 拖拽开始事件
draggableImage.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

// 阻止默认行为
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 放置处理
dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  e.target.appendChild(draggedElement);
});

增强拖拽体验

添加视觉反馈

js实现图片拖拽

#dropArea.drag-over {
  background-color: #f0f0f0;
  border-color: #666;
}

dropArea.addEventListener('dragenter', (e) => {
  e.target.classList.add('drag-over');
});

dropArea.addEventListener('dragleave', (e) => {
  e.target.classList.remove('drag-over');
});

多图片拖拽支持

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  e.target.classList.remove('drag-over');

  const files = e.dataTransfer.files;
  if (files.length > 0) {
    Array.from(files).forEach(file => {
      if (file.type.match('image.*')) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const img = document.createElement('img');
          img.src = e.target.result;
          img.width = 100;
          dropArea.appendChild(img);
        };
        reader.readAsDataURL(file);
      }
    });
  }
});

实现自由拖放

可拖动元素的位置控制

.draggable {
  position: absolute;
  cursor: move;
}

document.querySelectorAll('.draggable').forEach(item => {
  let posX = 0, posY = 0, mouseX = 0, mouseY = 0;

  item.addEventListener('mousedown', (e) => {
    e.preventDefault();
    mouseX = e.clientX;
    mouseY = e.clientY;

    document.onmousemove = (e) => {
      posX = item.offsetLeft + (e.clientX - mouseX);
      posY = item.offsetTop + (e.clientY - mouseY);
      mouseX = e.clientX;
      mouseY = e.clientY;

      item.style.left = posX + 'px';
      item.style.top = posY + 'px';
    };

    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });
});