HTML5 拖拽 API 演示

案例一：基础拖放

把左侧标签拖到右侧容器。关键点：dragstart 中设置 effectAllowed 与 setData； dragover 必须 preventDefault() 才能成为放置目标。

案例二：列表排序

上下拖动以重排。核心是用 getBoundingClientRect() 计算光标相对每个兄弟元素的位置， 配合 :not(.dragging) 排除自身，在 dragover 中实时 insertBefore。

• 需求评审 P0
• 技术方案设计 P0
• 接口联调 P1
• 自测与回归 P1
• 灰度上线 P2

案例三：文件拖拽上传

把任意文件拖入下方虚线区域，或点击选择。演示 DataTransfer.files 的读取与展示 （不会上传到服务器，仅本地显示）。