拖拽API需手动实现回收站功能：1. dragstart时用dataTransfer存元素ID；2. 回收站区域监听dragover并preventDefault，drop时取ID移除元素并暂存；3. 维护trashBin数组记录原位置，支持还原与彻底删除；4. 注意禁用内部拖拽、视觉反馈及批量处理兼容性。
拖拽 API 本身不直接提供“删除”或“回收站”逻辑，关键在于结合 dragstart、dragover、drop 和 dragend 等事件，配合数据标记与 DOM 操作，手动实现元素移入回收站区域并暂存/恢复。
1. 标记可拖拽元素并存储引用
在拖拽开始时，把被拖元素的 DOM 节点或唯一标识（如 data-id）存入 dataTransfer，便于后续识别：
- 给目标元素添加
draggable="true" - 监听
dragstart，用setData('text/plain', id)或setData('application/json', JSON.stringify({id, type}))存标识 - 避免直接传 DOM 节点（跨区域不可序列化），优先用轻量数据 + 映射表管理真实元素
2. 创建回收站区域并允许投放
回收站是一个普通容器，需显式启用拖放接收能力：
- 给回收站元素绑定
dragover并调用event.preventDefault()（否则无法触发drop） - 可加视觉反馈，例如在
dragenter时添加class="hover"，dragleave时移除 -
drop触发后，从dataTransfer.getData()取出 ID，从页面移除对应元素，并存入回收站数据池
3. 实现删除与还原逻辑
回收站不是只读展示区，要支持“彻底删除”和“还原到原位置”：
- 维护一个数组（如
trashBin = []），每项含id、element（或克隆节点）、originalParent、originalIndex - 还原时，用
insertBefore(element, originalParent.children[originalIndex] || null)插回原位 - 彻底删除则直接从 DOM 移除，并从数组中
splice对应项 - 建议为回收站中的每个条目添加“还原”和“删除”按钮，绑定对应操作
4. 注意边界与体验细节
实际使用中容易忽略但影响体验的关键点：
-
禁止在回收站内再次拖拽内部元素：回收站里的元素应设
draggable="false"，或拦截其dragstart - 拖拽过程中高亮回收站区域，但不要干扰其他拖放行为（例如文件上传）
- 若支持多选拖拽，需批量处理
dataTransfer.items，注意浏览器兼容性（items在部分旧版 Safari 中受限） - 清空回收站前建议二次确认，避免误操作
