draggable属性仅启用拖放能力，排序需通过dragstart、dragover、drop事件配合实现；必须在dragover中preventDefault才能触发drop，且需用dataTransfer存ID而非DOM引用，移动端须降级为touch事件模拟。
draggable 属性本身不触发排序，必须配合 drag 事件链
很多人以为给卡片加 draggable="true" 就能拖拽排序，结果发现卡片能拖但位置不动、松手后没变化——这是因为 draggable 只是开启原生拖放能力，真正控制排序逻辑得靠 dragstart、dragover、drop 这三个事件。浏览器默认对 drop 事件的处理是「忽略」，所以必须显式调用 event.preventDefault() 才能让 drop 触发。
常见错误现象：
- 拖拽时鼠标变成禁止符号（?），松手无反应 → 没在
dragover中阻止默认行为 - 卡片能拖但无法悬停到目标区域 → 目标容器没监听
dragover或没阻止默认行为 - 拖拽后卡片顺序错乱或重复插入 → 在
drop中直接用appendChild而没做位置计算
用 data-transfer 和 DataTransfer.setData 避免 DOM 引用丢失
在 dragstart 里直接存 event.target 到 dataTransfer 是无效的：原生拖放不传递 DOM 节点引用，只传序列化数据。必须手动存标识，比如卡片 ID：
card.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', card.dataset.id);
});
这样在 drop 事件中才能安全定位源卡片：
立即学习“前端免费学习笔记（深入）”；
board.addEventListener('drop', (e) => {
const id = e.dataTransfer.getData('text/plain');
const draggedCard = document.querySelector(`[data-id="${id}"]`);
// 后续插入逻辑...
});
注意点：
- 不要用
setData('text/html', ...)存 HTML 片段，容易被过滤或转义 - 避免用
setData('application/json', ...)，部分浏览器（如 Safari）对非标准类型支持不稳定 - 如果卡片 ID 含特殊字符（如斜杠、空格），需用
encodeURIComponent编码后再存
计算 drop 位置要用 document.elementFromPoint + 最近可插入点
单纯监听 drop 事件只能知道「落在哪个容器上」，但不知道该插到第几个子元素之前。可靠做法是在 dragover 阶段持续记录鼠标坐标，drop 时用 document.elementFromPoint(x, y) 找到当前悬浮的兄弟卡片，再结合 Array.from(container.children) 索引确定插入位置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键步骤：
- 在
dragover中保存event.clientX/clientY到闭包变量 -
drop时调用elementFromPoint，向上遍历直到找到同级卡片元素（比如带data-card的<li>） - 用
Array.prototype.indexOf查该卡片在父容器children中的位置，决定用insertBefore还是appendChild
性能提示：不要在 dragover 里频繁调用 elementFromPoint，它会触发重排；只存坐标，留到 drop 时查一次。
移动端不支持 draggable，必须降级为 pointer/touch 事件
draggable 是桌面端专属属性，iOS Safari 和 Android Chrome 均不响应 dragstart 等事件。真机测试时卡片完全无法拖动，不是代码问题，是特性缺失。
务实方案是检测 'ontouchstart' in window 或 matchMedia('(pointer: coarse)').matches，然后切换事件绑定：
- 桌面端：用
dragstart/dragover/drop - 移动端：监听
touchstart记录起始位置，touchmove模拟悬浮效果，touchend触发位置计算和插入
注意兼容细节：
- 移动端没有
dataTransfer，需用全局变量暂存拖拽 ID - 滚动容器内拖拽时，
touchmove会触发页面滚动，需event.preventDefault()控制 - 视觉反馈（如半透明、缩放）必须用
transform和opacity，避免触发布局重排
最易被忽略的是：同一套看板逻辑，在桌面端靠浏览器原生拖放 API，在移动端实际是完全重写的轻量模拟，二者状态管理必须隔离且同步。否则会出现桌面端排序了，切到手机端还是旧顺序。
