JavaScript Drag and Drop API需设draggable="true"并监听dragstart/drop事件，且dragover中必须preventDefault()否则drop不触发；移动端完全不支持该API。
JavaScript 的 Drag and Drop API 默认不启用拖放，必须手动设置 draggable="true" 并监听至少 dragstart 和 drop 事件才能生效；漏掉 preventDefault() 在 dragover 中会导致 drop 事件完全不触发。
让元素可拖放：不只是加 draggable="true"
仅在 HTML 元素上写 draggable="true" 只是开启“能被鼠标抓起”的能力，但拖拽过程中没有数据、没有视觉反馈、松手后也什么都不会发生。
-
dragstart事件里必须用event.dataTransfer.setData(format, data)写入拖拽内容（如"text/plain"或自定义类型），否则目标区域无法读取 - 若想拖动时显示自定义图片（比如半透明缩略图），需调用
event.dataTransfer.setDragImage(element, x, y)，且element不能是隐藏或未挂载节点 - 不处理
dragstart时的默认行为（例如<img alt="javascript的draganddropapi如何实现_如何让元素可拖放并处理放置目标【教程】" >会触发浏览器原生下载），可能干扰逻辑 —— 必要时调用event.preventDefault()
放置目标必须响应 dragover，否则 drop 不会触发
这是最常踩的坑：drop 事件永远不会到达目标元素，除非它在 dragover 阶段明确告诉浏览器“我接受投放”。浏览器默认阻止所有 drop，靠 dragover 中的 preventDefault() 解锁。
- 只监听
drop是无效的，必须同时监听dragover并在其中调用event.preventDefault() - 可以顺便在
dragover里加 class 切换视觉反馈（如target.classList.add("drag-over")），但记得在dragleave清除 - 如果目标区域是空容器（比如
<div></div>），高度为 0，则无法触发dragover—— 需设最小高度或 padding
在 drop 事件中读取拖拽数据并完成操作
drop 触发后，从 event.dataTransfer 读取数据即可。注意：只能读取 dragstart 时用相同 format 写入的内容。
立即学习“Java免费学习笔记（深入）”；
target.addEventListener("drop", (event) => {
event.preventDefault(); // 依然需要
const data = event.dataTransfer.getData("text/plain");
if (data) {
target.textContent = data;
}
});
-
getData("text/plain")返回字符串，getData("text/uri-list")可读取拖入的文件路径（仅限某些浏览器支持） - 拖文件进页面要用
event.dataTransfer.files（FileList对象），和文本拖拽走的是不同路径，不能混用getData - 若需区分多个拖拽源（如不同颜色卡片），可在
dragstart中写入 JSON 字符串：setData("application/json", JSON.stringify({id: 123, type: "card"}))
移动端不支持原生 Drag and Drop API
所有主流移动浏览器（iOS Safari、Chrome for Android）均未实现标准 Drag and Drop 事件。试图在手机上运行上述代码，dragstart 等事件根本不会触发。
- 不要依赖
draggable="true"做移动端交互，改用touchstart/touchmove/touchend手动模拟 - 第三方库如
interact.js或sortablejs封装了跨端拖放，但底层仍是事件模拟，不是原生 API - 即使在桌面端，
iframe跨域内容中拖出元素，也会丢失dataTransfer数据 —— 这是安全限制，无法绕过
真正麻烦的不是怎么写那几行事件监听，而是记住哪些地方必须 preventDefault、哪些数据格式只能在同源上下文传递、以及永远别在产品里假设用户只用桌面 Chrome。
