拖拽文件时默认光标为not-allowed，根本原因是浏览器在dragover阶段强制依据dataTransfer.dropEffect和effectAllowed推导光标，不响应CSS cursor声明；必须在dragover中调用e.preventDefault()并设置e.dataTransfer.dropEffect才能生效。

拖拽文件时默认光标是 not-allowed？根本原因不是 CSS 能直接改的

浏览器对文件拖拽（dragover 文件输入区域或自定义 drop 区域）的光标控制权优先级极高，:hover、:active 甚至 cursor: grab !important 在文件悬停阶段基本无效。这不是样式没写对，而是浏览器在 dragover 期间强制根据 dataTransfer.dropEffect 和 effectAllowed 推导光标，且只认“copy”“move”“link”“none”四类语义，不支持任意图标。

必须用 dragover + preventDefault + dropEffect 才能生效

要让文件拖入时显示 copy 光标（带加号），而不是默认的 not-allowed 或灰色禁用图标，关键三步缺一不可：

• 目标元素上监听 dragover，且必须调用 e.preventDefault() —— 否则 drop 永远不会触发，光标也卡在禁用态
• dragover 中设置 e.dataTransfer.dropEffect = 'copy'（或 'move'）
• 确保源端允许该操作：e.dataTransfer.effectAllowed 至少包含 'copy'；如果是网页内拖拽，需在 dragstart 中设 e.dataTransfer.effectAllowed = 'copy'；但文件系统拖入时，这个值由 OS 决定，前端无法修改，所以重点落在目标端的 dropEffect

常见踩坑：为什么设了 dropEffect 还是 not-allowed

以下情况会导致 dropEffect 设置失效，光标仍为禁止：

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

• 没在 dragover 中调用 e.preventDefault() —— 这是最常见的遗漏，光标和 drop 事件都会被拦截
• 目标元素没有设置 draggable="false"（如果它本身是可拖元素），否则可能触发双重拖拽逻辑冲突
• 用了 pointer-events: none 或父层遮挡，导致 dragover 根本没触发
• 在 dragenter 里设 dropEffect 而不在 dragover —— 浏览器只在 dragover 阶段实时读取并渲染光标

更稳的写法：配合 class 做视觉兜底

光标只是反馈的一部分。用户可能看不清小图标，或在高缩放/高对比度模式下辨识困难。建议同步加 DOM 状态：

立即学习“前端免费学习笔记（深入）”；

• 在 dragenter 时给目标加 class="drag-over"，显示边框/背景色/文字提示
• 在 dragleave 时移除该 class
• CSS 中写 .drag-over { border: 2px dashed #007bff; }，比依赖光标更可靠
• 不要只靠 cursor，尤其当目标区域有 padding/margin 时，鼠标实际悬停位置和触发 dragover 的边界可能不一致

真正起效的从来不是某一行 CSS，而是 dragover 中那句 e.preventDefault() 和紧随其后的 dropEffect 设置——漏掉任一，光标就回不到你期望的样子。