Chrome中使用JavaScript和CSS无法修改拖拽对象的光标样式

你的问题出在Chrome的原生拖拽行为上：拖拽过程中，浏览器会强制使用系统级的拖拽光标，直接修改元素的cursor属性（哪怕加!important）都会被忽略，这是浏览器默认的优先级机制导致的。

解决方案：通过自定义拖拽图像 + 全局光标控制实现 #

我们可以通过两步达成需求：

1. 隐藏浏览器默认的拖拽元素镜像，避免干扰视觉
2. 给整个页面（body）添加拖拽时的光标样式

修改后的代码如下：

JavaScript 部分

listElement.setAttribute("draggable", "true");

listElement.addEventListener("dragstart", (e) => {
  // 创建1x1的透明GIF作为拖拽图像，隐藏默认的元素镜像
  const transparentImg = document.createElement('img');
  transparentImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  e.dataTransfer.setDragImage(transparentImg, 0, 0);

  setTimeout(() => {
    listElement.classList.add("dragging");
    // 给body添加拖拽光标类
    document.body.classList.add("dragging-cursor");
  }, 0);
});

listElement.addEventListener("dragend", () => {
  listElement.classList.remove("dragging");
  document.body.classList.remove("dragging-cursor");
});

CSS 部分

.list-name.dragging {
  opacity: 0 !important;
}

/* 全局拖拽时的光标样式 */
body.dragging-cursor {
  cursor: pointer !important;
}

原理说明 #

• dataTransfer.setDragImage：用透明图像替换浏览器默认的拖拽元素快照，拖拽时不会显示原元素的镜像，避免视觉冲突。
• 给body设置光标：拖拽过程中鼠标实际在页面上移动，修改body的光标样式可以绕过浏览器对元素光标的限制，实现自定义光标效果。

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