safari严格校验effectallowed与dropeffect一致性，需在dragstart设effectallowed、dragover设同值dropeffect；setdragimage推荐用canvas绘制文本并设偏移0,0；目标高亮应改用dragover+requestanimationframe节流；移动端需polyfill或手动模拟，且必须保留draggable="true"。
dragstart里不设effectAllowed，Safari直接显示禁止光标
Chrome 和 Firefox 对 e.dataTransfer.effectAllowed 缺省值容忍度高，Safari 却会严格比对 dragstart 设置的 effectAllowed 和 dragover 中设置的 dropEffect。不一致时，光标立刻变成禁止图标（❌），且 drop 事件被静默拦截。
必须在 dragstart 回调中显式赋值：
-
e.dataTransfer.effectAllowed = 'move'（或'copy'，但避免用'all'或'uninitialized'） - 目标区域的
dragover回调中同步写e.dataTransfer.dropEffect = 'move'，类型必须完全一致 - 不要依赖默认值——哪怕只支持桌面端，Safari 也是常见上线环境
setDragImage 在 Firefox/Safari 行为不一致
setDragImage() 的参数和时机在各浏览器差异极大：
- Firefox 要求传入的图像已加载完成、宽高 > 0；传
document.body或未渲染的div会被静默忽略 - Safari 只接受
<img>或<canvas></canvas>实例，其他 DOM 元素无效 - Chrome 支持任意 DOM 元素（含
display: none的），但偏移坐标系理解容易出错
推荐做法：创建一个带透明背景的 <canvas></canvas>，用 ctx.fillText() 绘制简略文本标识，再调用 setDragImage(canvas, 0, 0) —— 统一设为 0, 0 避免跨浏览器偏移错位。
目标区高亮用 dragenter/dragleave 会闪烁
很多开发者靠 dragenter/dragleave 切换 class 来高亮目标容器，但在 Safari 和 Firefox 中，只要拖拽点进出子元素（比如文字、图标），就会频繁触发，导致样式反复切换、视觉闪烁。
正确做法是放弃这两个事件，改用：
-
dragover+requestAnimationFrame节流判断是否“真正悬停” - 确保目标容器有明确尺寸（空
div加min-height: 24px） - 高亮优先用
outline而非border，避免触发重排 - 别给容器设
pointer-events: none—— 这会彻底禁用所有拖拽事件
移动端原生 drag/drop 根本不触发
iOS Safari 和 Android Chrome 均不触发 dragstart/drop 等事件，这不是代码问题，是平台级限制。强行复用桌面逻辑会导致整个拖拽链路失效。
可行方案只有两个：
- 用轻量 polyfill，如
drag-drop-touch：它自动监听touchstart模拟dragstart，在touchmove中维护模拟的dataTransfer，并在touchend触发真实drop - 手动降级：检测
'ontouchstart' in window，切换为touchstart+transform+requestAnimationFrame模拟，同时加touch-action: none防止滚动干扰
最常被忽略的一点：即使用了 polyfill，也必须保留 draggable="true" 属性——它是 polyfill 自动识别可拖元素的依据，不是冗余。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
