要让元素真正可拖需三步：1. 源端设draggable="true"并绑定dragstart事件，调用setData()传数据；2. 目标端监听dragover并preventDefault()允许投放；3. drop事件中getData()并操作DOM。注意移动端不支持、type参数须用"text/plain"等坑点。
要让一个元素真正“可拖”，光加 draggable="true" 远不够。核心在于三件事：源端设属性并传数据，目标端允许投放，全程用对事件和方法。
1. 让元素变成可拖动的源头
不是所有元素默认能拖——<div>、<span>、<p> 都得手动开启。关键不止是加属性，还得在拖动开始时提供数据。
- 给目标元素写上
draggable="true"，比如<p id="item" draggable="true">拖我</p> - 必须绑定
dragstart事件，并调用event.dataTransfer.setData() - MIME 类型推荐用
"text/plain"，哪怕只传空字符串也比不传强：e.dataTransfer.setData("text/plain", "") - 可选：用
e.target.style.opacity = "0.6"或e.dataTransfer.setDragImage()做视觉反馈
2. 设置接收区域并允许投放
浏览器默认禁止任何区域接收拖放。目标容器必须主动“开门”，否则拖过去也没反应。
- 为目标容器（如
<div id="drop-area">）监听dragover事件 - 在该事件处理函数中必须写
e.preventDefault()——这是触发drop的前提 - 可顺便监听
dragenter和dragleave来加/删高亮样式，提升体验
3. 在目标处完成放置逻辑
drop 事件才是真正“落地”的时刻。这里读取数据、移动或克隆元素，都由你控制。
立即学习“前端免费学习笔记（深入）”；
- 同样要调用
e.preventDefault()，避免某些浏览器执行默认行为（比如打开链接） - 用
e.dataTransfer.getData("text/plain")取出dragstart里存的数据 - 常见操作：把被拖元素
appendChild进目标区，或用cloneNode(true)实现复制 - 如果想移动原元素，记得在
dragstart后把它从原位置移除，或用event.dataTransfer.effectAllowed = "move"提示语义
4. 注意几个实际坑点
这些细节不处理，功能大概率静默失败，且无报错提示。
- 移动端不支持原生拖放 API，需搭配触摸库降级处理
-
dataTransfer.setData()的 type 参数不能乱写，"text/plain"最稳妥；"json"或自定义类型可能在 Firefox 中失效 - 跨 iframe 拖拽需序列化数据，不能直接传 DOM 节点
- 拖拽过程中鼠标图标变化由
effectAllowed和dropEffect控制，但仅影响光标，不参与逻辑判断
