Drag and Drop Sortable List
Problem statement
Drag and Drop is one of the most requested machine coding questions at FAANG interviews. The challenge is to implement it using the native HTML5 Drag and Drop API — no libraries — which tests your understanding of drag events, ghost images, drop targeting, and smooth list reordering.
Build a sortable list where users can drag items to reorder them. As an item is dragged over other items, they should visually indicate that they are valid drop targets. On drop, the list reorders instantly with a smooth transition.
The key challenges are: tracking which item is being dragged and which is the current drop target, preventing items from dropping onto themselves, and implementing the array splice logic that produces the correct new order.
Requirements & constraints
- Items reorder on drag-and-drop using HTML5 native DnD API
- Visual drag-over indicator on potential drop targets
- Dragged item appears semi-transparent while dragging
- Drop on same position has no effect
- Smooth CSS transition on reorder
- Works with keyboard as a fallback (up/down arrow keys)
How to approach Drag and Drop Sortable List
The strategy an interviewer expects you to reach for.
Why This Question Exists Drag and Drop is requested in nearly every senior frontend interview because it requires knowing the HTML5 DnD API event sequence, understanding why refs beat state for tracking mid-drag positions, and correctly implementing the splice reorder. A candidate who knows libraries like react-dnd but doesn't understand the native API cannot answer this question.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.