"拖放与文件接收：HTML Drag and Drop 与 DataTransfer 实战"

概述HTML Drag and Drop 提供跨元素/应用的拖拽交互，`DataTransfer` 暴露拖放数据（文件、文本、HTML）。构建拖放上传/导入功能需正确定义事件处理与可访问样式，并处理安全边界与错误。用法与示例<div id="drop" style="border:2px dashed #999; padding:24px" aria-label="拖放文件到此" tabindex="0">拖放或粘贴文件</div> <script> const box = document.getElementById('drop') ;['dragenter','dragover','dragleave','drop'].forEach(evt => box.addEventListener(evt, e => e.preventDefault())) box.addEventListener('dragover', e => box.style.background = '#f5f5f5') box.addEventListener('dragleave', e => box.style.background = '') box.addEventListener('drop', async e => { const files = e.dataTransfer.files for (const f of files) { const text = await f.text().catch(() => null) console.log('file', f.name, f.type, f.size, text?.slice(0,80)) } }) // 粘贴接收 box.addEventListener('paste', e => { for (const item of e.clipboardData.items) { if (item.kind === 'file') { item.getAsFile() } if (item.kind === 'string') { item.getAsString(console.log) } } }) </script> 工程建议可访问性：为拖放区域提供 `aria-label` 与焦点样式；键盘用户可使用粘贴或文件选择回退。安全：校验文件类型与大小；避免解析/执行不可信 HTML/脚本；对敏感数据加密传输。错误与恢复：处理取消与失败；显示进度与结果。参考与验证MDN Drag and Drop 文档：https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_APIMDN DataTransfer 文档：https://developer.mozilla.org/docs/Web/API/DataTransferweb.dev 拖放指南：https://web.dev/articles/drag-and-drop