拖放功能不生效需检查：1. draggable="true" 属性必须显式设置为字符串；2. dragstart 中调用 dataTransfer.setData()；3. dragover 和 drop 均需 preventDefault()；4. 传对象须 JSON 序列化；5. 移动端需用 touch 事件模拟；6. drop 时用 composedPath().[0].closest() 定位真实目标。
拖放功能不生效？先检查 draggable 属性和默认行为
HTML5 拖放不是“加个事件监听就完事”，必须显式设置 draggable="true"，否则 dragstart 根本不会触发。常见错误是只写了 ondragstart 但忘了属性，或者用 JS 动态添加却没同步设置该属性。
另外，dragstart 里不调用 event.dataTransfer.setData()，后续的 drop 就拿不到数据；而 dragover 默认被浏览器阻止（为了防止页面被随意拖入链接或文件），必须在事件处理器中显式调用 event.preventDefault()，否则 drop 事件永远不会触发。
-
draggable必须设为字符串"true"，写成true（布尔值）或省略都不行 -
dataTransfer.setData('text/plain', 'some-value')的第一个参数是 MIME 类型，不是任意字符串；用'text/plain'最兼容 -
dragover和drop都要加preventDefault()，仅drop加不够
用 dataTransfer 传对象？别直接塞 JSON，得自己序列化
dataTransfer.setData() 只接受字符串值，不能直接传 JS 对象或数组。想拖动一个带 id 和 type 的元素，得先 JSON.stringify()，到 drop 时再 JSON.parse()。
注意：如果拖的是跨域资源（比如从桌面拖进浏览器），dataTransfer.types 可能只包含 'Files' 或 'text/uri-list'，此时无法读取自定义数据——这是安全限制，不是代码写错了。
立即学习“Java免费学习笔记（深入）”；
element.addEventListener('dragstart', (e) => {
const payload = { id: 'item-123', type: 'card' };
e.dataTransfer.setData('application/json', JSON.stringify(payload));
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('application/json');
if (data) {
const payload = JSON.parse(data);
console.log(payload); // { id: 'item-123', type: 'card' }
}
});
移动端没有原生 drag 事件？用 touchstart + touchmove 模拟
iOS 和 Android 浏览器默认禁用 HTML5 拖放 API，dragstart 等事件完全不触发。真要支持触摸设备，得放弃原生 API，改用触摸事件模拟：
- 在
touchstart记录初始位置和目标元素 - 用
touchmove实时更新元素transform: translate()或绝对定位 - 在
touchend判断是否落在有效区域，再执行“放置”逻辑 - 记得加
touch-action: none防止滚动干扰
这不是“补个 polyfill 就行”的事，而是整套交互逻辑重写。很多 UI 库（如 interact.js）就是这么干的。
为什么 drop 事件里的 target 总是父容器？用 event.composedPath() 定位真实落点
当拖拽目标是嵌套结构（比如卡片里有图标、文字、按钮），drop 事件的 event.target 往往是内层子元素（如 ），而非你期望的卡片容器。尤其在 Shadow DOM 或框架（如 Vue/React）中更明显。
不要依赖 event.target，改用 event.composedPath()[0] 获取最深的捕获节点，再用 closest('.droppable') 向上找目标容器：
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const actualTarget = e.composedPath()[0].closest('.card-container');
if (actualTarget) {
// 处理放置逻辑
}
});
这个细节在复杂布局中极易踩坑——表面功能正常，但一加新子元素就错位，根源往往在这里。
