如何在HTML中利用draggable属性和JS拖拽API制作待办事项清单-html教程-PHP中文网

draggable="true"仅声明可拖动，需JS监听dragstart/dragover/drop等事件并调用dataTransfer.setData()、preventDefault()及insertBefore()才能实现列表重排；移动端原生不支持，应改用专用库。

如何在html中利用draggable属性和js拖拽api制作待办事项清单

draggable="true" 只是起点，不加 JS 无法真正拖动

设置 draggable="true" 只是告诉浏览器“这个元素允许被拖”，它本身不会触发任何 DOM 移动或排序逻辑。如果你只写了

买牛奶

而没监听 dragstart、dragover、drop 等事件，拖拽会失败或直接打开新页面（尤其拖图片/链接时）。必须配合 JS 才能实现待办项重排。

常见错误现象：
- 拖动时鼠标变成禁止符号（?）
- 松手后列表没变化，甚至整个页面刷新
- 拖到空白处时提示“此操作不被允许”

必须在 dragstart 中调用 e.dataTransfer.setData()，哪怕只是设个空字符串（如 e.dataTransfer.setData('text/plain', '')），否则 Chrome/Firefox 会拒绝后续 drop
dragover 事件默认被阻止，需显式调用 e.preventDefault() 才能触发 drop
不要给或设 draggable="true"，它不是容器拖拽，而是列表项拖拽

用 dataTransfer.getData() 和 insertBefore 实现插入位置精准控制

靠 drop 事件的 e.target 很难判断该插到哪个位置——它可能是你拖进去的

自身，也可能是父，还可能是文字节点。正确做法是：在 dragover 阶段就计算光标相对于目标

的 Y 坐标，标记“插入上方”或“插入下方”，再在 drop 时用 insertBefore() 执行。

示例关键逻辑：

let dropTarget = null;
list.addEventListener('dragover', e => {
  e.preventDefault();
  const rect = e.target.getBoundingClientRect();
  const offset = e.clientY - rect.top;
  // 靠近顶部 → 插入到 target 前面；靠近底部 → 插入到 target 后面
  dropTarget = offset  {
  e.preventDefault();
  const dragged = document.querySelector('[data-dragging]');
  if (dropTarget && dropTarget !== dragged) {
    list.insertBefore(dragged, dropTarget);
  }
});

data-dragging 是你在 dragstart 中临时加的自定义属性（如 el.dataset.dragging = 'true'），用于快速定位被拖元素
避免用 appendChild()，它只能加到末尾；用 insertBefore() 才能维持拖拽时的视觉顺序
注意 dropTarget 可能为 null（比如拖到空区域），需兜底处理（例如追加到末尾）

移动端拖拽基本不可用，别指望 touch + draggable 一起工作

原生 draggable + drag* 事件在 iOS Safari 和多数安卓 WebView 中默认禁用或行为异常（比如不触发 dragstart）。这不是代码写错，是浏览器策略限制。试图用 touchstart + touchmove 模拟 drag 事件链，兼容性差且滚动冲突严重。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

真实项目中，移动端建议改用 sortablejs 或 react-sortable-hoc 这类专为触摸优化的库
如果坚持手写，必须监听 touchstart 并手动触发 dragstart（但部分 iOS 版本仍会静默失败）
不要在 dragstart 里读取 event.touches —— 它为空，drag* 事件和 touch 事件是两套互不通信的机制

localStorage 持久化拖拽后顺序时，别序列化整个 DOM

很多人拖完直接把 list.innerHTML 存进 localStorage，这会导致：HTML 被转义、事件监听器丢失、自定义属性（如 data-id）混乱、下次加载时所有 draggable="true" 元素失去 JS 绑定。

只存结构化数据：每个待办项应有唯一 id 和 order 字段，拖拽后更新数组顺序并存入 localStorage
渲染时用 JS 重建 DOM，而不是 innerHTML = ...，确保 addEventListener 重新绑定
示例存储格式：JSON.stringify([{id: 'task-1', text: '买牛奶', order: 0}, {id: 'task-2', text: '倒垃圾', order: 1}])

拖拽逻辑本身不复杂，但跨浏览器行为差异、移动端支持缺失、状态持久化方式选择，才是实际落地时最常卡住的地方。