在index.html中实现拖拽排序列表：HTML5拖放API实战-html教程-PHP中文网

根本原因是dragover事件默认被浏览器阻止，需在目标元素监听dragover并调用e.preventdefault()；顺序错乱需手动计算光标位置决定插入点；移动端原生拖放受限，需css启用或换用sortablejs；数据状态须与dom同步并持久化。

在index.html中实现拖拽排序列表：html5拖放api实战

拖拽时列表项闪退或无法进入目标区域

根本原因是 dragover 事件默认被浏览器阻止，导致无法触发 drop。不加阻止默认行为，拖拽就“悬停失败”。

必须在目标元素（如 <ul></ul> 或每个 <li>）上监听 dragover 并调用 e.preventDefault()：

ul.addEventListener('dragover', e => {
  e.preventDefault(); // 关键：允许放置
});

只写 e.preventDefault() 就够了，别加 e.stopPropagation()——它会干扰嵌套拖拽逻辑
如果用 CSS 设置了 ul { min-height: 20px }，能避免空列表区域无法响应 dragover
不要在 dragenter 里做 preventDefault，它不保证持续触发，靠 dragover 才稳定

拖拽后顺序错乱或插入位置不准

HTML5 拖放不自动处理 DOM 插入点，得手动计算光标相对于目标项的位置，再决定用 insertBefore 还是 appendChild。

核心判断逻辑是：比较鼠标 Y 坐标与当前 <li> 的中线位置：

ul.addEventListener('drop', e => {
  const dragged = document.querySelector('[draggable="true"][data-id]');
  const targetLi = e.target.closest('li');
  if (!targetLi || dragged === targetLi) return;

  const rect = targetLi.getBoundingClientRect();
  const isAfter = e.clientY > rect.top + rect.height / 2;

  if (isAfter) {
    ul.insertBefore(dragged, targetLi.nextSibling);
  } else {
    ul.insertBefore(dragged, targetLi);
  }
});

closest('li') 确保捕获的是有效列表项，防止点击文字/空白处误判
别依赖 e.target 直接是 li——它可能是内部的 span 或 div
插入前务必检查 dragged === targetLi，否则可能把自己插到自己前面，引发 DOM 异常

移动端不触发 dragstart 或完全无响应

HTML5 原生拖放 API 在 iOS Safari 和多数安卓 WebView 中默认禁用，draggable="true" 不生效。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

必须显式启用触摸支持，且需绕过原生限制：

给可拖拽项添加 touchstart 事件，手动触发 dragstart 模拟（但注意：真机上仍受限）
更可靠的做法是改用轻量库如 sortablejs，它用 touchmove + transform 重写拖拽逻辑
若坚持纯原生，至少加 CSS 规则：li { -webkit-user-drag: element; user-drag: element; }（仅部分 Safari 版本支持）

实际项目中，iOS 上 90% 的“拖拽失效”问题都源于没意识到这个平台限制。

拖拽过程中数据状态和 DOM 不同步

很多人只操作 DOM，忘了更新背后的数据数组，下次重新渲染或提交时顺序就错了。

推荐绑定唯一 data-id，拖拽完成时按新 DOM 顺序重建 ID 数组：

function getSortedIds() {
  return Array.from(ul.querySelectorAll('li'))
    .map(li => li.dataset.id)
    .filter(id => id); // 排除空值
}
// drop 后调用：
const newOrder = getSortedIds(); // 同步到 state 或发送到后端