拖拽到特定元素时移除/调整原生拖放ghost image的实现方案

要实现默认使用浏览器原生拖拽图像，仅拖拽到指定元素上方时隐藏原生图像并使用自定义图像的效果，可以通过以下步骤实现：

核心思路 #

• 在dragstart事件中初始化拖拽图像，规避浏览器默认行为的限制；
• 拖拽进入目标区域时，用setDragImage将原生图像替换为透明图像实现隐藏，同时显示自定义拖拽元素；
• 拖拽离开目标区域时，恢复原生拖拽图像并隐藏自定义元素。

完整代码示例 #

HTML

<p>拖拽时默认使用原生Ghost图像，仅在拖到指定元素上方时切换</p>
<img id="img" draggable src="https://picsum.photos/50/50" />
<div id="div">试试拖到我上面</div>
<!-- 自定义拖拽图像，初始隐藏 -->
<div id="customDragImg" style="display:none;position:absolute;width:60px;height:60px;background:#ccc;border:1px solid #333;"></div>

CSS

div#div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  padding: 40px;
}

JavaScript

const img = document.getElementById('img');
const targetDiv = document.getElementById('div');
const customDragImg = document.getElementById('customDragImg');
let originalDragImage = null;

// 初始化拖拽事件
img.addEventListener('dragstart', function(e) {
  // 保存原生拖拽图像引用，同时初始化setDragImage（保持默认效果）
  originalDragImage = e.target;
  e.dataTransfer.setDragImage(e.target, 0, 0);
  
  // 绑定鼠标移动事件，用于定位自定义拖拽图像
  const moveHandler = function(e) {
    customDragImg.style.left = `${e.clientX + 10}px`;
    customDragImg.style.top = `${e.clientY + 10}px`;
  };
  
  // 拖拽结束后清理监听并隐藏自定义图像
  img.addEventListener('dragend', function() {
    document.removeEventListener('mousemove', moveHandler);
    customDragImg.style.display = 'none';
  });
  
  document.addEventListener('mousemove', moveHandler);
});

// 进入目标区域时替换图像
targetDiv.addEventListener('dragenter', function(e) {
  this.style.background = 'yellow';
  // 用透明图像替换原生Ghost，实现隐藏
  const transparentImg = new Image();
  transparentImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  e.dataTransfer.setDragImage(transparentImg, 0, 0);
  // 显示自定义拖拽图像
  customDragImg.style.display = 'block';
});

// 离开目标区域时恢复原生效果
targetDiv.addEventListener('dragleave', function(e) {
  this.style.background = '';
  // 恢复原生拖拽图像
  e.dataTransfer.setDragImage(originalDragImage, 0, 0);
  // 隐藏自定义图像
  customDragImg.style.display = 'none';
});

// 必须阻止dragover默认行为，否则无法正常触发后续拖拽相关事件
targetDiv.addEventListener('dragover', function(e) {
  e.preventDefault();
});

关键说明 #

• setDragImage必须在dragstart事件中首次调用才能生效，后续可在dragenter/dragleave中重复调用修改；
• 使用透明Base64图像替换原生图像，达到隐藏原生Ghost的效果；
• 自定义拖拽图像通过绝对定位跟随鼠标，需在dragstart中绑定mousemove事件更新位置；
• 拖拽结束后及时清理事件监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Vytalyi