html原生drag api拖不动card元素是因为：默认不支持拖拽，仅设draggable="true"不够，必须监听dragstart并调用e.datatransfer.setdata()，且需处理内部元素劫持、移动端禁用等问题。
HTML原生drag API为什么拖不动card元素
默认情况下，任何HTML元素都不支持拖拽，draggable属性只是开启“可被选中拖拽”的标识，真正触发拖拽行为还需要手动监听dragstart等事件并阻止默认行为。常见错误是只加了draggable="true"就以为能拖，结果鼠标划过毫无反应。
-
draggable="true"必须显式写在card容器上（如<div class="card" draggable="true">） <li>必须监听<code>dragstart事件，并在其中调用e.dataTransfer.setData()，哪怕只是设个空字符串：e.dataTransfer.setData('text/plain', '')，否则Chrome/Firefox会静默禁用拖拽 - 如果card内部有图片、链接或表单控件，它们可能劫持拖拽事件，建议在
dragstart里对e.target做判断，必要时e.stopPropagation() - 给目标区域（比如卡片容器父元素）添加
dragover监听器，并调用e.preventDefault()——这是允许放置的前提，否则drop永远不会触发 - 在
dragenter时给目标区域加临时class（如droppable-active），用CSS高亮背景或边框 - 在
dragleave和drop后立刻移除该class，避免状态残留 - 不推荐用
dataTransfer.setDragImage()自定义拖拽图标——它对定位极敏感，容易偏移，且移动端无效 - 优先用
insertBefore()而非appendChild()：计算出目标插入点（比如鼠标靠近哪个card的上半区/下半区），再用parent.insertBefore(draggedCard, referenceCard) - 监听
dragover时，用getBoundingClientRect()动态判断鼠标相对于目标card的Y/X偏移比例，决定插入到该card之前还是之后 - 避免在
drop事件里直接操作DOM；先记录目标索引，用requestAnimationFrame()延迟执行移动，减少布局抖动 - 如果使用CSS Grid，注意
grid-template-rows固定高度会导致拖拽占位不准，建议用auto-fit或minmax()配合gap - 不要依赖
draggable属性和drag*事件在手机上工作，它们基本不起作用 - 改用
touchstart/touchmove/touchend实现拖拽逻辑：记录起始坐标，实时更新transform: translate()，松手后计算最近目标并动画归位 - 为兼容桌面和移动端，可用
'ontouchstart' in window检测环境，分支处理 - 第三方库如
sortablejs或react-dnd底层已处理该适配，但要注意它们默认可能仍依赖原生API，需确认是否启用forceFallback: true等降级选项
如何让card拖拽时显示自定义视觉反馈
原生拖拽默认只显示半透明快照（可能模糊或截断），且无法控制样式。想让拖拽过程更直观，得靠dragover和drop事件配合CSS类切换。
拖拽排序card列表时怎么避免DOM错乱
直接用appendChild()把拖动的card插入新位置，常导致视觉跳动或顺序错位，尤其在flex/grid布局下。根本原因是没考虑文档流与渲染时机的差异。
移动端拖拽card为什么完全失效
所有主流移动端浏览器（iOS Safari、Android Chrome）默认禁用原生drag事件，因为跟手势冲突。这不是bug，是设计使然——你得自己模拟。
dataTransfer.setData()这行不能少，dragover.preventDefault()这个不能漏，移动端还得彻底换套逻辑——缺一个，card就纹丝不动。
