2 min read
Step 4: Drag & Drop
Implement drag-and-drop reordering of board items.
Where We Are
Items can be added and deleted. But a mood board isn’t useful if you can’t rearrange things. Let’s add drag-and-drop.
The Drag-and-Drop API
HTML5 has a native drag-and-drop API. No libraries needed.
Add drag-and-drop reordering to the board items:
- Each card should be draggable
- When dragging, show a visual indicator (semi-transparent card)
- Show a drop target indicator where the card will land
- When dropped, reorder the card in the DOM
Use the native HTML5 drag-and-drop API (dragstart, dragover, drop events).
No external libraries.Visual Feedback
The drag experience should feel smooth:
Improve the drag-and-drop visual feedback:
- The dragged card should become semi-transparent (opacity 0.5)
- Other cards should shift to show where the drop will happen
- Add a subtle highlight or border to the drop target area
- When the drag ends (drop or cancel), reset all visual statesEdge Cases
Handle these drag-and-drop edge cases:
- Dropping at the beginning of the board
- Dropping at the end of the board
- Dropping back in the same position (no-op)
- Dragging over non-card areasTest It
- Add 5-6 items of mixed types
- Drag the first item to the end
- Drag the last item to the beginning
- Drag an item to the middle
- Drop an item back where it started
The reordering should feel natural and the grid should update immediately.
Checkpoint
- Cards are draggable
- Visual feedback during drag
- Drop target indicator shows placement
- Reordering works in all positions
- Grid updates immediately after drop
What You Learned
- HTML5 drag-and-drop API (dragstart, dragover, dragend, drop)
- DataTransfer for passing data between drag events
- Visual feedback patterns for drag interactions
- DOM reordering with insertBefore and appendChild