设了draggable="true"却拖不动，主因是dragstart未调setData()、dragover未preventDefault、drop未preventDefault；必须三者齐备：起点传ID数据、途中开启投放许可、终点阻止默认行为。
设了 draggable="true" 却拖不动、松手没反应、drop 事件不触发——不是浏览器坏了，是原生拖拽链断在了某个硬性环节。它不像 CSS 那样写完就生效，而是必须配齐三件事：起点标记、数据注入、投放许可。
dragstart 里不调 dataTransfer.setData()，拖拽根本不会启动
浏览器看到 draggable="true" 只会改光标样式，但认为“没东西可拖”，直接跳过后续流程。哪怕你绑了 dragstart 监听器，漏掉这行代码，整个拖拽就卡死。
-
e.dataTransfer.setData('text/plain', e.target.id)是最简可用写法；传空字符串''在 Safari 会失败，至少传'0'或真实 ID - 别用
'Text'或自定义类型如'mydata'，Firefox 会静默忽略；'application/json'可用，但得先JSON.stringify() - 不能在
dragstart外提前设置——dataTransfer对象只在该事件上下文中可写 - 动态渲染的元素（如 Vue
v-for、Reactmap）要避免逐个绑定，改用事件委托：container.addEventListener('dragstart', e => { if (e.target.matches('[draggable="true"]')) { ... } })
目标元素的 dragover 必须每次调 e.preventDefault()
这不是“拦一次就行”的逻辑。鼠标每移动一像素经过目标区域，浏览器都检查是否允许投放；没 preventDefault()，drop 就永远不会派发——控制台也不报错，只会看到光标变圆圈斜杠。
- 只监听
drop没用；只在dragenter里preventDefault()也没用；必须在dragover回调中写e.preventDefault() - 目标如果是空
<div>，得有尺寸（比如min-height: 24px或padding: 4px），否则dragover根本不触发 - Safari 对
effectAllowed和dropEffect匹配更敏感：建议在dragstart中加e.dataTransfer.effectAllowed = 'move'，在dragover中加e.dataTransfer.dropEffect = 'move' - 别给父容器（如看板列的
<div class="column">）设draggable="true"，它会抢走dragstart，导致跨列拖拽失败
<input>、<textarea> 硬加 draggable="true" 是无效的
所有主流浏览器（Chrome/Firefox/Safari）都会无视对原生表单控件设置的 draggable="true"。这不是 bug，是渲染层限制——它们不支持 setDragImage，也无法稳定响应拖拽事件。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是把表单控件包进
<div>容器，并对容器设draggable="true" - 空
<div draggable="true"></div>也不会触发dragstart，必须有宽高或内边距（min-height、padding均可） -
user-select: none或pointer-events: none会直接拦住dragstart，连光标都不变，调试时先检查这些样式
移动端压根不支持原生 draggable 属性
iOS Safari、Android Chrome、所有 WebView 场景下，draggable="true" 和整套 Drag & Drop API 均不触发。这不是兼容性补丁能解决的问题，是规范层面未定义触摸拖拽行为。
- 别直接照搬桌面代码；需降级为
touchstart/touchmove/touchend+CSS transform手动模拟 - 或引入轻量库如
interact.js或sortablejs，它们内部已做平台兼容处理 - 若坚持用原生 API，至少检测
'ontouchstart' in window并切换为点击+长按激活模式
最容易被忽略的是：拖拽排序时依赖 DOM 顺序推导状态，而框架渲染滞后于 drop 回调，下一次拖拽拿到的可能是旧节点。ID 映射比 indexOf() 更可靠，WeakMap 存映射关系比反复查数组更稳。
