Vue.js下Chrome浏览器可拖拽元素光标修改失效问题求助

我太懂你这种挫败感了——Chrome最近几个版本确实把之前的老方案都给淘汰了，尤其是当拖拽时元素自动生成drag image的情况，常规的:active或者直接设置cursor: grabbing根本不生效，系统默认的拖拽光标会完全覆盖你的设置。

问题复现（你的代码片段可能类似这样） #

<div draggable="true" class="drag-item">试着拖拽我</div>

.drag-item {
  cursor: grab;
  width: 150px;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 4px;
}

/* 这个在Chrome拖拽时完全不生效 */
.drag-item:active {
  cursor: grabbing;
}

有效的CSS+JS解决方案 #

核心思路是在拖拽开始时给全局（body）添加拖拽状态类，强制设置全局光标为grabbing，同时可以选择隐藏默认的drag image，让光标更清晰：

<div draggable="true" class="draggable-element">拖拽我试试</div>

/* 初始状态的grab光标 */
.draggable-element {
  cursor: grab;
  width: 150px;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 4px;
}

/* 关键：全局拖拽状态下的光标设置 */
body.dragging {
  cursor: grabbing !important;
}

/* 可选：隐藏默认的drag image，避免干扰光标显示 */
.draggable-element::drag-image {
  display: none;
}

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

// 拖拽开始时添加全局状态类
dragElement.addEventListener('dragstart', () => {
  document.body.classList.add('dragging');
});

// 拖拽结束时移除状态类
dragElement.addEventListener('dragend', () => {
  document.body.classList.remove('dragging');
});

为什么这个方案有效？ #

Chrome在拖拽过程中会优先渲染系统默认的拖拽光标或生成的drag image，常规的元素光标设置会被忽略。通过给body添加全局的dragging类并使用!important强制覆盖光标样式，就能绕过这个限制，让grabbing光标始终显示。

如果你的场景是多个可拖拽元素，只需要把JS逻辑改成批量绑定事件即可，比如用document.querySelectorAll('.draggable-element')遍历添加监听。

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