直接写 cursor: grab 在拖动时经常不生效，因为浏览器在 dragstart 后会接管光标控制并覆盖 CSS；需用 JavaScript 动态添加带 !important 的 .grabbing 类来强制生效。
为什么直接写 cursor: grab 在拖动时经常不生效
因为浏览器在 dragstart 触发后会接管光标控制权，自动覆盖你写的 cursor: grab，尤其在拖动开始瞬间常变成 not-allowed 或默认箭头。这不是 CSS 写错了，而是拖放生命周期中浏览器行为优先级更高。
伪类如 :hover 或 :active 也无法稳定捕获拖动中的状态——元素可能已脱离悬停范围，:active 又只在鼠标按下未松开时触发，而拖动往往持续数秒，中间存在状态空档。
必须用 JavaScript 监听 dragstart 和 dragend 动态加类
核心解法是绕过浏览器的光标劫持：在拖动真正开始时强制加一个带 !important 的类，在结束时立刻移除。这样能确保光标样式在关键帧内生效。
- 给目标元素添加
draggable="true"（否则dragstart根本不会触发） - 定义两个 CSS 类：
.grabbed（对应grab）和.grabbing（对应grabbing），都带!important - 在
dragstart中添加.grabbing类；在dragend中移除它
.grabbed { cursor: grab !important; }
.grabbing { cursor: grabbing !important; }
document.querySelectorAll('.draggable-item').forEach(el => {
el.addEventListener('dragstart', () => {
el.classList.add('grabbing');
});
el.addEventListener('dragend', () => {
el.classList.remove('grabbing');
});
});
grab 和 grabbing 的兼容性差异不能忽略
这两个值在 Safari 15.4 之前、部分安卓 WebView、旧版 Edge 中会被静默降级为 default，用户完全看不到抓手效果。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 如果产品需支持 iOS 14 或更低版本，
grab不可作为功能依赖，仅作增强显示 - 更稳妥的 fallback 是搭配
move：比如cursor: move, grabbing, grab;（注意顺序，浏览器取第一个支持的值） - 不要用
grab替代交互逻辑——拖动是否可行，得靠dragover/drop事件和DataTransfer判断，不是光标说了算
常见失效原因排查清单
即使写了 JS + CSS，光标仍不显示？大概率卡在这几个地方：
-
pointer-events: none父容器没检查——只要父级禁用了指针事件，子元素再怎么设cursor都无效 - CSS 优先级被覆盖，比如全局重置规则
* { cursor: default !important; }后续出现，直接干掉你的类 - 元素没有实际尺寸或内容（例如空
div且没设width/height），导致无法触发dragstart - 本地开发用
file://协议跑页面，但自定义图片光标（url()）被 Chrome 主动拦截，此时连 fallback 都不走
最易被忽略的一点：拖动过程中，光标样式只作用于被拖元素本身，不是整个页面。如果你希望拖动时整个视口显示 grabbing，得手动把类加到 document.body 上，并在 dragend 清除——但要注意避免影响其他交互区域的光标语义。
