HTML Drag and Drop Playground

Example 1: Basic drag and drop

Drag a label from the left into the container on the right.Key points: dragstart set in effectAllowed and setData； dragover must preventDefault() to become a drop target。

Example 2: List sorting

Drag items up and down to reorder.核心是用 getBoundingClientRect() calculates the pointer position relative to each sibling， 配合 :not(.dragging) to exclude itself，在 dragover 中实时 insertBefore。

• Requirements review P0
• Technical design P0
• API integration P1
• Self-test and regression P1
• Staged rollout P2

Example 3: File drag-and-drop upload

Drop any file into the dashed area below, or click to choose.示例 DataTransfer.files to read and display (files are not uploaded and are displayed locally only).