HTML5拖放必须四步全做：设draggable="true"、dragstart中调setData()、dragover中preventDefault()、drop中用匹配类型调getData()，缺一不可。
拖拽元素前必须设置 draggable="true"
HTML5 拖放 API 不会自动启用任何元素的拖拽能力。哪怕是个 <div>，默认也拖不动。必须显式加属性：<code>draggable="true"。注意：只对 <img alt="html5拖放api怎么实现_原生js拖拽元素简单操作【方法】" > 和 <a></a> 元素默认为 true，其他所有标签（包括 <div>、<code><span></span>、<li>）都默认是 false。
常见错误：写了 ondragstart 但没加 draggable="true"，结果完全没反应。别跳过这一步。
dragstart 里必须调用 setData() 否则拖拽中断
在 dragstart 事件中，不调用 event.dataTransfer.setData()，Chrome/Firefox 会直接取消拖拽流程（松手即结束，目标区域收不到 drop）。这是最容易被忽略的硬性要求。
常用写法：
立即学习“前端免费学习笔记（深入）”；
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id); // 必须有这一行
});
说明：
-
'text/plain'是最兼容的类型，'text/html'或自定义类型（如'application/json'）在跨浏览器时可能失效 - 值可以是任意字符串，比如 ID、JSON 字符串，但不能是对象或函数
- 不设类型或设错类型，
drop事件里的getData()就拿不到东西
目标区域要阻止 dragover 默认行为才能触发 drop
很多新手卡在「能拖但放不进去」——根本原因是没处理 dragover。浏览器默认会阻止元素成为有效放置目标，所以必须监听并 preventDefault()：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！没有这行，drop 事件永远不会触发
});
注意点：
- 只阻止
dragover就够了，dragenter不需要（除非你要高亮提示） - 如果目标是
<input type="file">这类原生控件，它自己已处理，不用额外干预 - 若目标区域是空
<div>，记得给它设个最小高度/边框，否则视觉上“看不见”可拖区域 <h3> <code>drop里取数据要用getData()，且类型必须匹配setData()在
drop事件中，靠e.dataTransfer.getData('text/plain')拿到拖拽时存的数据。类型字符串必须和setData()时一致，否则返回空字符串。典型操作链：
dropZone.addEventListener('drop', (e) => { e.preventDefault(); const id = e.dataTransfer.getData('text/plain'); // 类型要严格一致 const draggedEl = document.getElementById(id); if (draggedEl) { dropZone.appendChild(draggedEl); // 移动元素 } });易错提醒：
- 忘了
e.preventDefault()→ 页面会跳转（如果是拖链接）或打开文件（如果是拖文件） - 类型写成
'Text/Plain'（大小写敏感）→ 返回空 - 试图用
getData('text/html')取setData('text/plain')存的值 → 拿不到
真正麻烦的不是 API 多难记，而是每个环节都有一个“非做不可”的小动作：设
draggable、调setData、阻dragover、配对getData类型。漏一个，整个链就断了。 - 忘了
