Learn how to build drag and drop interfaces with dnd kit
Choose your preferred framework to get started:
Build drag and drop interfaces using React components and hooks
Build drag and drop interfaces using plain JavaScript
Learn the essential building blocks:
The central orchestrator that coordinates drag and drop operations
Elements that can be picked up and dragged to new locations
Target areas where draggable elements can be dropped
Draggable elements that can be reordered within and across lists
Make it your own with powerful extension points:
Add new features and behaviors with the plugin system
Support different input methods like mouse, touch, and keyboard
Modify drag behavior with constraints and transformations