必须设置 draggable="true" 且阻止 dragover 和 drop 的默认行为，drop 中通过 dataTransfer 或全局变量获取 ID 删除元素。

拖拽删除列表项必须启用 draggable 属性

HTML5 原生拖拽不是默认开启的，<li> 或其他容器元素即使加了 ondragstart 也不会触发拖拽行为。必须显式设置 draggable="true"，否则整个流程卡在第一步。

常见错误是只监听事件却忘了设属性，浏览器直接忽略所有拖拽相关事件（dragstart、dragover 等完全不触发）。

• <li draggable="true">Item 1</li> —— 必须这样写，draggable 是布尔属性，不能只写 draggable（部分老浏览器不认）
• 避免对父容器（如 <ul>）设 draggable="true"，否则拖的是整个列表，不是单个条目
• 移动端不支持原生 draggable，需用 touchstart + touchmove 模拟，或引入 interact.js 等库

删除操作只能在 drop 阶段执行，且需阻止默认行为

很多人误以为在 dragend 里删元素，其实这时拖拽已结束，目标位置信息丢失；真正能拿到投放位置和目标元素的是 drop 事件，但它默认被浏览器拦截（比如丢到文本框会插入文字），必须主动 event.preventDefault() 才能生效。

关键点在于：只有 drop 和 dragover 两个事件都阻止默认行为，drop 才会被触发。

html-to-pptx-converter

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

下载

立即学习“前端免费学习笔记（深入）”；

• 必须同时监听并阻止 dragover：event.preventDefault()，否则 drop 永远不会触发
• drop 事件中通过 event.target 获取被拖到的元素（通常是 <li> 自身），再调用 .remove()
• 如果想支持“拖到垃圾桶图标删除”，则 drop 目标是垃圾桶元素，需单独绑定其 drop 事件并移除 data-drag-id 对应的 <li>

dragstart 中必须设置 dataTransfer.setData()

不设传输数据，drop 事件里的 dataTransfer 就是空的，无法识别拖的是哪个元素。很多实现直接在 drop 里用 event.target 删自身，看似可行，但一旦支持跨列表拖拽或需要校验来源，就会出错。

推荐用唯一标识而非 DOM 引用（dataTransfer.setDragImage() 只影响视觉，不传数据）：

• 在 dragstart 中：event.dataTransfer.setData('text/plain', event.target.dataset.id)
• <li draggable="true" data-id="item-2">Item 2</li>
• drop 时用 event.dataTransfer.getData('text/plain') 取回 ID，再 document.querySelector('[data-id="' + id + '"]').remove()
• 别用 'text/html' 类型——不同浏览器解析不一致，'text/plain' 最稳妥

IE11 和 Safari 对 dataTransfer 的兼容性坑

IE11 不支持 dataTransfer.setData('text/plain', ...) 在非 input/textarea 元素上设值，Safari 14 之前对 getData() 返回空字符串。实际项目中，最稳的方式是绕过 dataTransfer，改用临时全局变量或 dataset 标记。

• 在 dragstart 中记录：window.draggedItemId = event.target.dataset.id
• 在 drop 中读取并清理：const id = window.draggedItemId; delete window.draggedItemId;
• 务必在 dragend 里也清理该变量（防止拖拽取消后残留）
• 若需支持多实例列表（如左右两个 <ul>），用闭包或 WeakMap 存储更安全，避免全局污染

拖拽删除看着简单，但跨浏览器一致性差、移动端缺失、事件链依赖强——最容易被忽略的是 dragover 的 preventDefault 和 draggable="true" 的强制声明，漏一个就全程静默失败。