如何修改HTML Drag and Drop API中的拖拽光标样式？

方案一：隐藏默认拖拽光标，用JS实现自定义光标 #

这是最灵活的方式，完全脱离浏览器默认样式：

1. 隐藏默认拖拽反馈：拖拽开始时，通过dragstart事件里的event.dataTransfer.setDragImage()传入1x1透明图，彻底隐藏默认的拖拽光标/元素预览。
2. 实时跟随鼠标：创建自定义光标DOM元素，通过mousemove事件监听鼠标坐标，设置绝对定位让元素跟随移动。
3. 切换状态样式：根据鼠标是否进入可放置区域，切换自定义光标的样式类，拖拽结束后销毁该元素。

示例代码：

// 1x1透明base64图，无需额外资源
const blankImg = new Image();
blankImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';

let customCursor;

document.addEventListener('dragstart', (e) => {
  // 隐藏默认拖拽预览
  e.dataTransfer.setDragImage(blankImg, 0, 0);
  
  // 创建自定义光标元素
  customCursor = document.createElement('div');
  customCursor.className = 'custom-drag-cursor no-drop';
  document.body.appendChild(customCursor);
  
  // 更新光标位置
  const updatePos = (mouseEvent) => {
    customCursor.style.left = `${mouseEvent.clientX}px`;
    customCursor.style.top = `${mouseEvent.clientY}px`;
  };
  document.addEventListener('mousemove', updatePos);
  
  // 拖拽结束清理资源
  e.target.addEventListener('dragend', () => {
    document.removeEventListener('mousemove', updatePos);
    customCursor.remove();
    customCursor = null;
  }, { once: true });
});

// 监听可放置区域的状态切换
document.querySelectorAll('.drop-zone').forEach(zone => {
  zone.addEventListener('dragenter', (e) => {
    e.preventDefault();
    customCursor?.classList.replace('no-drop', 'allow-drop');
  });
  
  zone.addEventListener('dragleave', () => {
    customCursor?.classList.replace('allow-drop', 'no-drop');
  });
  
  zone.addEventListener('dragover', (e) => {
    e.preventDefault(); // 维持可放置状态
  });
});

配套CSS：

.custom-drag-cursor {
  position: fixed;
  pointer-events: none; /* 避免干扰拖拽事件触发 */
  width: 32px;
  height: 32px;
  z-index: 9999;
  background-size: cover;
}

.custom-drag-cursor.no-drop {
  background-image: url('你的禁止拖拽光标图路径');
}

.custom-drag-cursor.allow-drop {
  background-image: url('你的允许拖拽光标图路径');
}

方案二：利用拖拽事件结合CSS修改光标 #

如果不想额外创建DOM元素，可以通过事件切换全局或局部光标样式：

1. 拖拽开始时，给body设置自定义禁止光标，同时隐藏默认拖拽预览。
2. 鼠标进入可放置区域时，给区域设置允许放置的光标样式。
3. 拖拽结束后恢复默认光标。

示例代码：

const blankImg = new Image();
blankImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';

document.addEventListener('dragstart', (e) => {
  e.dataTransfer.setDragImage(blankImg, 0, 0);
  document.body.style.cursor = 'url("你的禁止拖拽光标图路径"), auto';
});

document.addEventListener('dragend', () => {
  document.body.style.cursor = 'auto';
});

document.querySelectorAll('.drop-zone').forEach(zone => {
  zone.addEventListener('dragover', (e) => {
    e.preventDefault();
    zone.style.cursor = 'url("你的允许拖拽光标图路径"), auto';
  });
  
  zone.addEventListener('dragleave', () => {
    zone.style.cursor = 'auto';
  });
  
  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    zone.style.cursor = 'auto';
    // 处理放置逻辑
  });
});

注意：自定义光标URL有浏览器尺寸限制（通常最大32x32），需提前适配图片大小。

关于CSS伪元素的说明 #

伪元素（::before/::after）无法实现这个需求——拖拽光标属于系统层面的样式控制，伪元素是DOM层级元素，无法覆盖系统级光标，也不能直接绑定拖拽事件，因此不适用。

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