HTML Drag and Drop API：文件拖放与数据传输

## 概述 原生拖放通过 `dragenter/dragover/dragleave/drop` 事件与 `DataTransfer` 实现。可以读取拖入的文件列表并做类型过滤与预览。 ## 用法/示例 ```js const box = document.getElementById('drop') box.addEventListener('dragover', e => { e.preventDefault(); box.classList.add('hover') }) box.addEventListener('dragleave', () => box.classList.remove('hover')) box.addEventListener('drop', async e => { e.preventDefault() const files = [...e.dataTransfer.files].filter(f => /image\/.+/.test(f.type)) for (const f of files) { const url = URL.createObjectURL(f) } }) ``` ## 工程建议 - 明确拖放区域与视觉提示，避免误操作；限制文件类型与大小并进行清理。 - 对敏感数据禁止拖入，提示用户风险；在移动端提供替代上传入口。 - 与 File System Access/Clipboard 协作，提升文件输入体验。 ## 参考与验证 - MDN：HTML Drag and Drop — https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API