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

概述原生拖放通过 `dragenter/dragover/dragleave/drop` 事件与 `DataTransfer` 实现。可以读取拖入的文件列表并做类型过滤与预览。用法/示例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