如何在JavaScript的dragstart或dragover阶段修改拖放区域光标？

问题核心 #

HTML5原生拖拽过程中，浏览器会强制使用默认拖拽光标，直接修改拖拽元素或目标区域的cursor属性会被浏览器默认行为覆盖——这就是你之前三种尝试失效的原因：

• 直接设置event.target.style.cursor或添加CSS类，只有在dragend（浏览器释放光标控制权）时才会生效；
• dropEffect的有效值仅为copy/move/link/none，设置grabbing完全无效。

可行解决方法 #

方法1：替换默认拖拽图标+全局光标控制

这是最可靠的方案，通过隐藏默认拖拽图标，让自定义光标样式生效：

1. 准备一个1x1的透明PNG（或直接用空Image对象）；
2. 绑定事件：

// 初始化透明图（也可以直接用new Image()）
const transparentImg = new Image();
transparentImg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

const draggableElement = document.querySelector('.your-draggable-element');

draggableElement.addEventListener('dragstart', (e) => {
  // 替换默认拖拽图标为透明图，隐藏浏览器默认箭头
  e.dataTransfer.setDragImage(transparentImg, 0, 0);
  // 修改全局光标为grabbing
  document.body.style.cursor = 'grabbing';
});

draggableElement.addEventListener('dragend', () => {
  // 拖拽结束后恢复默认光标
  document.body.style.cursor = 'default';
});

方法2：CSS状态类+:has选择器（现代浏览器支持）

利用CSS选择器全局控制光标，同时配合拖拽状态类：

1. CSS样式：

/* 拖拽元素本身的光标 */
.your-draggable-element.is-dragging {
  cursor: grabbing !important;
}
/* 全局光标跟随拖拽状态 */
body:has(.your-draggable-element.is-dragging) {
  cursor: grabbing !important;
}

2. JS事件绑定：

const draggableElement = document.querySelector('.your-draggable-element');

draggableElement.addEventListener('dragstart', (e) => {
  draggableElement.classList.add('is-dragging');
  // 隐藏默认拖拽图标
  e.dataTransfer.setDragImage(new Image(), 0, 0);
});

draggableElement.addEventListener('dragend', () => {
  draggableElement.classList.remove('is-dragging');
});

补充说明 #

如果需要针对拖放区域（而非全局）修改光标，可以把document.body替换为拖放区域元素，在dragover事件中设置光标，dragleave或dragend时恢复。

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