HTML如何实现列表拖拽删除_HTML5交互功能实例-html教程-PHP中文网

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

html如何实现列表拖拽删除_html5交互功能实例

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

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

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

<li draggable="true">Item 1</li> —— 必须这样写，draggable 是布尔属性，不能只写 draggable（部分老浏览器不认）
避免对父容器（如 <ul></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 标记。