HTML元素默认无法被拖拽，哪怕加了draggable="true"，也只对<img>和起作用；普通<div><span>等必须显式设draggable="true"、监听dragstart并调用event.dataTransfer.setData()，否则静默失败；目标区须监听dragover并preventDefault()才可触发drop；移动端原生drag事件基本不可用，需改用PointerEvent或touch事件模拟。
拖拽功能为什么默认不生效
HTML元素默认无法被拖拽，哪怕加了 draggable="true"，也只对 <img> 和 <a> 这类原生可拖拽元素起作用。普通 <div>、<span> 等必须显式设置 draggable="true"，且要手动监听事件才能真正响应拖拽行为。
常见错误是只写 draggable="true" 就以为完事了，结果拖不动——因为没处理 dragstart 事件，也没设置 dataTransfer 数据。
- 必须在
dragstart里调用event.dataTransfer.setData()，否则拖拽会静默失败 -
dataTransfer只支持字符串类型，不能直接传对象或 DOM 节点 - Chrome/Safari 对
text/plain类型最兼容；Firefox 还支持text/html，但行为不一致，慎用
怎么让目标区域接受拖拽
目标容器（比如一个空 <div>）默认会拒绝所有拖入操作，必须显式阻止 dragover 的默认行为，否则 drop 事件根本不会触发。
关键不是“监听 drop”，而是“先允许它发生”——这一步漏掉，整个拖拽链就断了。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
dragover并调用event.preventDefault() - 仅阻止
dragover不够，还要确保目标元素有明确尺寸（比如min-height: 50px），否则可能因高度为 0 导致无法触发 -
drop事件里记得再调一次event.preventDefault()，避免浏览器执行默认跳转或打开文件
target.addEventListener('dragover', e => e.preventDefault());
target.addEventListener('drop', e => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
console.log(data);
});
拖拽时如何获取被拖元素和位置信息
dragstart 事件里的 event.target 是被拖的原始元素，但 drop 事件中无法直接还原它——因为 dataTransfer 只存字符串。所以得靠业务逻辑自己编码标识。
常见做法是把唯一 ID 或类型信息塞进 setData()，而不是试图传 DOM 结构。
- 不要在
setData()里塞 HTML 字符串，容易 XSS，也难解析 - 推荐用 JSON 字符串：
e.dataTransfer.setData('application/json', JSON.stringify({id: 'item-123', type: 'card'})) -
drop时用getData('application/json')解析，再查 DOM 或状态树定位源元素 - 如果需要实时反馈拖拽位置，用
dragenter/dragleave配合 CSS class 切换，比反复计算坐标更可靠
移动端拖拽为什么基本不可用
原生 drag 事件在 iOS Safari 和大部分安卓 WebView 中被禁用或严重受限——这不是 bug，是规范层面的放弃。iOS 上 draggable 属性会被忽略，dragstart 根本不触发。
想在移动端做类似交互，必须换方案，不能硬套桌面端逻辑。
- 不要尝试用
touchstart+touchmove模拟 drag 事件流，那样会和原生滚动冲突 - 优先考虑
PointerEvent（iOS 13.4+ / Android Chrome 支持较好），监听pointerdown→pointermove→pointerup - 若需兼容老设备，用
touchstart+touchmove，但务必在touchmove里调用e.preventDefault()阻止滚动，并加{ passive: false }监听器
复杂点在于：桌面端靠浏览器原生拖拽语义，移动端得自己管理位移、碰撞、释放逻辑——这不是配置问题，是实现范式的切换。
