HTML元素启用原生拖拽必须显式设置draggable="true"，仅此声明有效；需配合dragstart、dragover、drop事件及dataTransfer数据传递，且移动端和Safari存在严重兼容问题。
draggable="true" 是唯一有效的声明方式
HTML 元素要支持原生拖拽，必须显式设置 draggable="true"。默认情况下几乎所有元素的 draggable 值都是 "auto"（对文本、图片、链接等内置可拖拽，其余为 false），但行为不一致且不可靠，所以不能依赖默认值。
常见错误是写成 draggable（无值）、draggable="1" 或 draggable="on" —— 这些在规范中均视为 false，拖拽完全不会触发。
-
draggable="false"：强制禁用拖拽，即使它是图片或链接 -
draggable="true"：明确启用，浏览器才触发dragstart等事件 -
draggable="auto"：由浏览器按元素类型自动判断，不推荐用于可控交互
只加 draggable 属性远远不够
单纯设置 draggable="true" 只能让光标变成“抓手”，但拖拽过程中没数据、放不到目标区、甚至根本拖不动——因为原生拖拽是事件驱动的，必须手动绑定事件并处理数据传递。
最关键的三个事件是：dragstart（设置拖拽数据）、dragover（允许放置）、drop（接收数据）。缺一不可。
立即学习“前端免费学习笔记（深入）”；
-
dragstart中必须调用event.dataTransfer.setData()，否则drop时dataTransfer为空 -
dragover默认被浏览器阻止（防止页面跳转），必须event.preventDefault() -
drop也要preventDefault()，否则可能触发导航或文件下载
img 和 a 标签默认可拖拽，但行为受限
<img> 和 <a href="..."> 在未设 draggable 时也能拖，但这是浏览器的“快捷拖拽”行为：前者拖出的是图片 URL，后者拖出的是链接 href，且无法自定义数据或控制放置逻辑。
如果你需要拖拽一个 <div> 或自定义组件，哪怕它里面包着一张图，也必须给该容器设 draggable="true"，并自己处理事件链。
- 直接拖
<img src="a.jpg">→ 触发浏览器下载或新页打开，不是你代码能接管的 - 拖
<div draggable="true"><img></div>→ 完全由你控制，dataTransfer可设任意字符串/JSON - 想禁用链接拖拽？加
draggable="false"即可，比 CSSuser-select: none更直接
移动端和 Safari 的兼容性坑
桌面端 Chrome/Firefox/Edge 对 draggable 支持良好，但 Safari（尤其 iOS）长期存在 bug：拖拽开始后 dragend 不触发、dataTransfer 在 drop 里读不到、或者整个拖拽流程卡死。
这不是配置问题，是 WebKit 引擎实现缺陷。真实项目中，如果目标用户含大量 iOS 用户，建议绕过原生 draggable，改用 mousedown/mousemove/mouseup + CSS transform 模拟，或引入 interact.js 这类库统一处理。
另外，所有移动端浏览器都不支持原生 drag 事件（触屏无 dragstart），draggable="true" 在手机上基本无效——别浪费时间调试。
