dragstart是拖拽唯一入口，需draggable="true"且移动2px才触发；dragover必须preventdefault()并设dropeffect；drop读取数据需匹配类型；dragenter/dragleave有嵌套陷阱；dragend不保证成功，应据dropeffect判断。
dragstart 事件：拖拽开始时的唯一入口
只有当元素设置了 draggable="true"，且用户按下鼠标并移动一定距离（通常 2px），才会触发 dragstart。它不是“鼠标按下就触发”，而是“拖拽动作被系统确认后才触发”。
常见错误是直接在 mousedown 里写拖拽逻辑，结果发现 dragstart 根本没进——因为浏览器还没认定这是拖拽。
-
event.dataTransfer在此时才可写入数据（setData()），早于这个时机调用会静默失败 - 必须在此事件中设置
event.dataTransfer.effectAllowed（如"move"、"copy"），否则后续drop可能被阻止 - 推荐只设一次图标：用
event.dataTransfer.setDragImage()指向一个已渲染的<canvas></canvas>或隐藏<div>，避免动态生成导致闪烁 <h3>dra<a style="color:#f60; text-decoration:underline;" title="go" href="https://www.php.cn/zt/15863.html" target="_blank">go</a>ver 和 drop：目标区必须显式允许投放 </h3> <p><code>dragover默认被浏览器取消（即不允许投放），所以即使绑了drop监听器，也不触发。必须在dragover中调用event.preventDefault()，才能让drop有机会执行。这不是可选项，是强制流程。漏掉这句，整个拖放链就断在目标区外。
立即学习“前端免费学习笔记（深入）”；
- 仅
preventDefault()不够：还需设置event.dataTransfer.dropEffect（如"move"）来匹配源端的effectAllowed -
drop事件中，event.dataTransfer.files仅对文件有效；普通文本/自定义数据需用getData("text/plain")等方式读取 - 避免在
dragover中做重绘或 DOM 查询——它可能每秒触发数十次，卡顿源头常在这里
dragenter / dragleave：用于视觉反馈，但有边界陷阱
dragenter在拖拽进入目标元素时触发，dragleave在完全离开时触发。它们适合加 class 显示高亮边框，但要注意嵌套容器的冒泡干扰。典型问题：目标区内部有子元素，拖拽经过子元素时，
dragleave立刻触发，高亮消失——其实还没出父容器。- 正确做法：用
event.relatedTarget判断是否真的离开了目标区域，或改用dragover+ 计时器防抖 - 不要在
dragenter中修改dataTransfer，它不可写，且无实际作用 - 移动端不支持这些事件（iOS Safari 完全禁用），别指望它们在手机上生效
dragend：拖拽结束的收尾信号，但不等于操作成功
dragend总是触发，无论是否落到有效目标上（比如拖到空白处、浏览器外、禁用区域）。它只是表示“用户松开了鼠标”，不代表drop已发生。容易误用场景：在
dragend里清理临时状态，结果发现drop还没处理完，数据已丢失。- 清理逻辑应放在
drop成功后，或用标志位区分（如let dropped = false，drop中置为true） -
event.dataTransfer.dropEffect在dragend中可读，值为最终执行的效果（"none"表示未投放成功） - 如果需要撤销操作（如拖拽失败后还原位置），应在
dragend中检查dropEffect === "none"再处理
整个流程依赖
dataTransfer对象贯穿始终，但它是个单向通道：只能从dragstart写入，之后只读；且不同来源（文件、文本、自定义类型）读写方式不同。最常被忽略的是 effect 匹配和preventDefault()的必要性——这两点错一个，拖放就静默失效。 - 仅
