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 states

Edge 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 areas

Test It

1. Add 5-6 items of mixed types
2. Drag the first item to the end
3. Drag the last item to the beginning
4. Drag an item to the middle
5. 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

Exercises

1. Send the drag-and-drop prompt, then run the five-step test sequence (first-to-end, last-to-beginning, into the middle, and back to start) and confirm each reorder lands where expected.
2. Add the "Visual Feedback" prompt and watch a drag closely — verify the dragged card goes semi-transparent and all visual states reset cleanly when you drop or cancel.
3. Try each edge case from the prompt (dropping at the very start, the very end, and back in place) and note whether any feels broken; if so, describe it to Claude as a follow-up.