What React skills does "Build Drag and Drop" practice?

This challenge practices: useState, useRef, drag events, array reordering. It is rated hard difficulty and takes approximately 30 minutes.

What are the hints for "Build Drag and Drop"?

Use useRef for the drag source index (no re-render needed) and useState for drop target (needs visual update) Call e.preventDefault() in onDragOver to allow dropping Reorder with splice: remove from source, insert at target

hard30 min

Build Drag and Drop

Build a drag-and-drop reorderable list using the HTML5 Drag and Drop API. Users should be able to drag items to reorder them within the list. Provide visual feedback during the drag operation (highlight the drop target). This exercise tests event handler coordination and state transformation.

Skills

useStateuseRefdrag eventsarray reordering

Tests

Renders all items in initial order
Items are draggable
Highlights the drop target during drag
Reorders items on drop
Cleans up drag state after drop

Your Code

Loading editor...