HTML全局属性draggable拖拽教程-html教程-PHP中文网

设了draggable="true"却拖不动，主因是dragstart未调setdata()、dragover未preventdefault、drop未preventdefault；必须三者齐备：起点传id数据、途中开启投放许可、终点阻止默认行为。

html全局属性draggable拖拽教程

设了 draggable="true" 却拖不动、松手没反应、drop 事件不触发——不是浏览器坏了，是原生拖拽链断在了某个硬性环节。它不像 CSS 那样写完就生效，而是必须配齐三件事：起点标记、数据注入、投放许可。

浏览器看到 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、React map）要避免逐个绑定，改用事件委托：container.addEventListener('dragstart', e => { if (e.target.matches('[draggable="true"]')) { ... } })

这不是“拦一次就行”的逻辑。鼠标每移动一像素经过目标区域，浏览器都检查是否允许投放；没 preventDefault()，drop 就永远不会派发——控制台也不报错，只会看到光标变圆圈斜杠。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

只监听 drop 没用；只在 dragenter 里 preventDefault() 也没用；必须在 dragover 回调中写 e.preventDefault()
目标如果是空 <div>，得有尺寸（比如 <code>min-height: 24px 或 padding: 4px），否则 dragover 根本不触发
Safari 对 effectAllowed 和 dropEffect 匹配更敏感：建议在 dragstart 中加 e.dataTransfer.effectAllowed = 'move'，在 dragover 中加 e.dataTransfer.dropEffect = 'move'
别给父容器（如看板列的 <div class="column">）设 <code>draggable="true"，它会抢走 dragstart，导致跨列拖拽失败
<input>、<textarea></textarea> 硬加 draggable="true" 是无效的

所有主流浏览器（Chrome/Firefox/Safari）都会无视对原生表单控件设置的 draggable="true"。这不是 bug，是渲染层限制——它们不支持 setDragImage，也无法稳定响应拖拽事件。
- 正确做法是把表单控件包进 <div> 容器，并对容器设 <code>draggable="true"
- 空 <div draggable="true"></div> 也不会触发 dragstart，必须有宽高或内边距（min-height、padding 均可）
- user-select: none 或 pointer-events: none 会直接拦住 dragstart，连光标都不变，调试时先检查这些样式