draggable="true"仅开启拖拽开关，不自动触发事件或移动元素；必须手动绑定dragstart（调setData）、dragover（preventDefault）和drop事件，并处理dataTransfer数据，移动端原生不支持。
draggable 属性本身不触发拖拽，只是开启 HTML5 拖放协议的起点
设置 draggable="true" 只是告诉浏览器“这个元素可以被拖”，但不会自动产生视觉反馈或移动效果。真正拖拽行为由浏览器原生拖放事件（dragstart、dragover、drop 等）驱动，且必须手动监听和处理，否则拖不动、放不下、甚至被浏览器默认行为中断（比如图片被另存为）。
常见错误现象：draggable="true" 加了，鼠标按住却拖不起来；或者能拖但松手没反应；又或者拖到目标区时光标显示禁止符号（?）——基本都是没阻止默认行为或没监听 dragover。
- 必须在
dragstart中调用e.dataTransfer.setData()，否则drop事件里拿不到数据 - 目标容器必须监听
dragover并调用e.preventDefault()，否则无法触发drop -
draggable对<img alt="HTML元素draggable属性怎么实现拖拽效果" >和<a></a>默认为true，其他元素默认false，需显式设置
拖拽过程中如何控制光标样式和拖动图像
浏览器默认会在拖拽时显示一个半透明的元素副本（称为 drag image），但这个副本往往模糊、位置偏移，甚至不可见。想自定义拖拽视觉反馈，得在 dragstart 里用 e.dataTransfer.setDragImage()。
注意：该方法第三个参数是相对于鼠标指针的偏移量（x, y），不是绝对坐标；传入的 DOM 元素不能是隐藏的（display: none 或 visibility: hidden），否则无效。
立即学习“前端免费学习笔记（深入）”；
- 推荐用临时创建的
<div>+position: absolute+pointer-events: none来做 drag image - 如果只改光标样式，可在
dragstart里设置e.dataTransfer.effectAllowed = "move"（或"copy"、"link"），再配合 CSS 的::-webkit-drag伪类（仅 WebKit 支持有限） - Firefox 不支持
setDragImage()对 SVG 元素生效，建议转成 canvas 或 bitmap
为什么拖拽后目标元素收不到 drop 事件
最常见原因是没正确处理 dragover —— 浏览器规定：只有当目标元素持续触发 dragover 且调用了 e.preventDefault() 时，drop 才会被触发。漏掉任何一个环节，drop 就静默失败。
另一个隐蔽问题是事件委托失效：drop 事件不冒泡，所以不能靠父容器监听来捕获子元素上的 drop；必须直接绑定到可投放的目标节点上，或用 event.composedPath()[0] 在捕获阶段识别实际目标。
- 务必在
dragover和dragenter中都调用e.preventDefault()，前者维持可投放状态，后者用于高亮提示 - 如果目标是空容器（比如
<div></div>），它可能没有尺寸，导致拖拽悬停时无法触发dragover，加个min-height: 20px或padding保底 - 移动端不支持原生 drag/drop，
draggable属性在 iOS Safari 和 Android Chrome 中基本无效
替代方案：什么时候该放弃原生 draggable
原生 drag/drop API 兼容性差、行为不可控、移动端完全失效，且对复杂交互（如排序、跨 iframe、实时预览）支持极弱。真实项目中，90% 的“拖拽”需求其实更适合用 mousedown/mousemove/mouseup 手动实现，或引入轻量库如 interact.js、SortableJS（针对列表排序）、react-dnd（React 生态）。
原生方案只适合简单场景：单向拖放文本/链接、演示性质的 demo、或作为降级 fallback。一旦需要拖拽缩放、碰撞检测、多点触控、滚动自动触发，就得切到手动实现或专业库。
容易被忽略的是：原生 drag/drop 会干扰 touch 事件，在混合设备（如带触摸屏的 Windows 笔记本）上极易出现事件冲突，调试困难。
