Drag Drop

Summary

The native HTML Drag and Drop API (`draggable`, `dragstart`, `drop`, etc.) lets users drag elements or files around the page — the basis of reorderable lists and file-drop zones. Native drag-and-drop has several event and browser quirks, so understanding the underlying API is useful even when a production application later adopts a dedicated library.

• 1Build a simple drag-and-drop file upload zone. Keep the first version small, then add one improvement after the core behavior works.
• 2Make a list of items reorderable using native drag-and-drop events. Validate your understanding by applying it in a small practical example.
• 3Consider a library (dnd-kit, react-beautiful-dnd) for complex cases — the native API is fiddly.