Drag and Drop
Pick up a card and drop it into any of several empty slots.
StarterWeb appUI component2–4hAI-buildable 5/5no setup
The HTML Drag and Drop API with its full event set — dragstart, dragover, dragenter, dragleave, drop — plus the hover styling that makes a drop target feel real. The foundation for any kanban board you build later.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 4
- An item can be dragged out of its slot
- Valid drop targets highlight on drag-over
- Dropping moves the item into the new slot
- Highlight clears correctly when the pointer leaves a target
The interesting part
- dragleave firing on child elements and clearing the highlight prematurely
Once it works
- Support reordering within a list
- Add keyboard-accessible move controls
Suggested stack
reacttypescripttailwinddnd-kittanstack-query