html5 Drag API 通过 draggable=”true” 和 dragstart 等 事件 实现原生拖放，需阻止 dragover 默认行为以启用 drop，支持多 数据类型 及自定义视觉反馈。
html5 Drag API 提供了一套原生、轻量的拖放 接口，不需要第三方库就能实现元素拖拽、跨区域投放等常见交互。关键在于理解事件生命周期和正确设置可拖放属性。
让元素变成可拖动状态
默认情况下，只有图片、链接和选中的文本能被拖动。要让任意元素（比如 div、button）支持拖拽，必须设置 draggable=”true” 属性：
仅加这个属性还不够——还需监听 dragstart 事件，在其中设置拖拽数据（如文本、URL 或自定义类型），否则拖拽可能无效或无反馈：
element.addEventListener(‘dragstart’, (e) => {
e.dataTransfer.setData(‘text/plain’, ‘ 自定义拖拽内容 ’);
});
监听拖拽过程中的关键事件
拖拽不是单个动作，而是一系列事件组成的流程。常用事件及作用如下：
立即学习“Java 免费学习笔记（深入）”；
- dragstart：拖拽开始时触发，用于初始化数据和视觉反馈（如半透明效果）
- dragover：被拖元素在目标区域上方移动时持续触发，必须阻止默认行为（
e.preventDefault()），否则 drop 事件不会触发 - dragenter：首次进入有效投放区时触发，适合添加高亮样式
- dragleave：离开投放区时触发，用于移除高亮
- drop：在目标区松开鼠标时触发，真正执行投放逻辑（如移动 dom、更新数据）
处理投放（drop）并获取拖拽数据
在目标容器上监听 drop 事件，通过 e.dataTransfer.getData('text/plain') 获取之前设置的数据。注意：必须同时监听并阻止 dragover 的默认行为，否则 drop 不会生效：
dropZone.addEventListener(‘dragover’, e => e.preventDefault());
dropZone.addEventListener(‘drop’, e => {
e.preventDefault();
const data = e.dataTransfer.getData(‘text/plain’);
console.log(‘ 接收到：’, data);
});
进阶技巧：支持多种数据类型与视觉反馈
除了 text/plain，还可使用 text/html、application/json 等类型传递结构化信息。配合 e.dataTransfer.effectAllowed 和 e.dataTransfer.dropEffect 可控制拖拽图标（如 copy、move、link）。为提升体验，建议在 dragstart 中设置 e.dataTransfer.setDragImage() 自定义拖拽影像，或用 css 的 drag 伪类 做样式过渡。
