HTML5原生Drag and Drop实现列表拖拽排序需设li的draggable="true"，在dragstart存数据、dragover中preventDefault并计算插入位置、drop时更新数据或DOM，dragend清理状态，注意禁用文本选中、设置effectAllowed，并知悉移动端不支持。

在HTML5中用原生Drag and Drop API实现列表项拖拽排序，关键在于正确监听拖拽生命周期事件、维护数据状态、动态更新DOM顺序，并避免浏览器默认行为干扰。它不依赖第三方库，但需细致处理拖拽位置判定和视觉反馈。

基础结构与拖拽属性设置

让每个列表项可拖拽，需为其添加draggable="true"属性，并绑定dragstart事件用于记录被拖项索引或数据：

• 仅对<li>（或自定义项容器）设draggable="true"，不要加在<ul>上
• 在dragstart中使用e.dataTransfer.setData()存标识信息（如"text/plain"类型 + 项ID或索引）
• 为<ul>设置dragover和drop事件监听器——这是接收拖拽的关键

处理拖拽进入与放置目标定位

dragover事件默认被浏览器阻止（防止打开文件等），必须调用e.preventDefault()才能触发drop；同时可用它实现“插入线”提示效果：

html-to-pptx-converter

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

下载

• 在dragover中计算鼠标相对于<ul>的Y坐标，遍历所有<li>获取其getBoundingClientRect()，判断鼠标是否处于某项的上半区或下半区
• 动态添加临时::before或::after伪元素（或一个绝对定位的<div class="drop-hint">）显示插入位置
• 记录当前悬停位置对应的插入索引（例如：在第2项上方 → 插入到索引2位置）

执行排序并同步数据与视图

drop事件触发时，根据之前记录的插入索引，从原始数组中移除被拖项、插入到新位置，再重新渲染列表或直接操作DOM：

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

• 从e.dataTransfer.getData("text/plain")取出拖拽项标识，结合原始数据源定位该项
• 若采用DOM直改方式：用insertBefore()将被拖<li>插入到目标位置的<li>前；注意先remove()再insertBefore()，否则会自动移除
• 更推荐“数据驱动”：更新JS数组顺序后，调用一次renderList()全量重绘（适合中小型列表），确保状态与界面严格一致
• 务必在dragend中清理视觉提示（如移除插入线）和临时状态

增强体验与常见避坑点

原生API易忽略细节，影响交互自然性：

• 禁用dragstart时的默认文本选中：给<li>加user-select: none
• 拖拽过程中鼠标图标可能异常？可在dragstart中设置e.dataTransfer.effectAllowed = "move"，并在dragover中设e.dataTransfer.dropEffect = "move"
• 移动端不支持原生Drag & Drop —— 如需兼容，应降级为touch事件模拟，或引入interact.js等轻量库
• 避免在<ul>上监听dragenter来判断首次进入，因子元素冒泡可能导致重复触发；优先依赖dragover和位置计算