拖动draggable类<li>元素时Grabbing光标丢失，光标变为pointer+的技术问题求助

我之前也踩过这个一模一样的坑！当给元素加上draggable="true"后，浏览器的默认拖拽行为会直接覆盖我们通过:active伪类设置的光标样式，这就是你看到光标变成pointer+而不是预期grabbing的核心原因。

问题根源 #

浏览器在触发拖拽操作时，会立刻进入自身的专属拖拽状态，此时:active伪类的触发逻辑会和默认拖拽行为冲突——拖拽开始后，浏览器会直接忽略:active的样式规则，转而使用自带的拖拽光标样式，完全跳过我们的自定义设置。

解决方案：用JS监听拖拽事件切换类 #

我们可以通过监听dragstart和dragend事件，手动给元素添加/移除grabbing类，绕过浏览器的默认行为，强制应用我们想要的光标样式。

步骤1：修改CSS规则

把原来的:active伪类换成自定义的.grabbing类：

.draggable { 
  cursor: move; 
  cursor: grab; 
  cursor: -moz-grab; 
  cursor: -webkit-grab; 
}
/* 替换:active为.grabbing类 */
.draggable.grabbing { 
  cursor: grabbing; 
  cursor: -moz-grabbing; 
  cursor: -webkit-grabbing; 
}

步骤2：添加JS事件监听

给所有可拖拽元素绑定拖拽事件，动态切换类：

const draggableItems = document.querySelectorAll('.draggable');

draggableItems.forEach(item => {
  // 拖拽开始时添加grabbing类
  item.addEventListener('dragstart', () => {
    item.classList.add('grabbing');
  });

  // 拖拽结束时移除grabbing类
  item.addEventListener('dragend', () => {
    item.classList.remove('grabbing');
  });
});

进阶优化：隐藏浏览器默认拖拽光标 #

如果操作后还是能看到浏览器自带的拖拽光标残影，可以通过setDragImage方法设置一个透明图片，彻底替换默认的拖拽反馈：

draggableItems.forEach(item => {
  item.addEventListener('dragstart', (e) => {
    // 创建一个1x1的透明GIF图片
    const transparentImg = new Image();
    transparentImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    // 设置拖拽时的反馈图片为透明图
    e.dataTransfer.setDragImage(transparentImg, 0, 0);
    
    item.classList.add('grabbing');
  });

  item.addEventListener('dragend', () => {
    item.classList.remove('grabbing');
  });
});

这样操作后，拖拽时就能稳定显示grabbing光标了，亲测有效！

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