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 to reorder. Use getBoundingClientRect() to locate the pointer relative to each sibling, and :not(.dragging) to exclude the dragged item. During dragover events, reorder with 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 files below or click to select. This demonstrates DataTransfer.files to read and display (files are not uploaded and are displayed locally only).