Quickstart
Start building drag and drop interfaces with React in minutes.
You will learn
- How to make elements draggable
- How to set up droppable targets
- How to listen to drag and drop events to move elements
Overview
The @dnd-kit/react
package provides a set of React components and hooks that you can use to build drag and drop interfaces. It is thin React integration layer built on top of the vanilla library, so all of the same concepts are shared and can be used. You can refer to the vanilla documentation of these concepts, such as plugins, modifiers, and sensors.
Installation
Before getting started, make sure you install @dnd-kit/react
in your project:
Making elements draggable
Let’s get started by creating draggable elements that can be dropped over droppable targets. To do so, we’ll be using the useDraggable
hook.
The useDraggable
hook requires a unique id
, and returns a ref
that you can attach to any element to make it draggable.
Creating droppable elements
In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements.
To do so, we’ll be using the useDroppable
hook.
Like the useDraggable
hook, the useDroppable
hook requires a unique id
, and returns a ref
that you can attach to any element to make it droppable.
This time, we’ll accept the id
argument as a prop of the Droppable
component.
Putting all the pieces together
Now that we have both draggable and droppable elements, we can put them together to create a simple drag and drop interaction.
We’ll be using the DragDropProvider
component to wrap our draggable and droppable elements.
This component handles the drag and drop interactions between our draggable and droppable elements and allow us listen to drag and drop events.
We now have a simple drag and drop interaction set up. You can now build on top of this to create more complex interactions.
For example, you can render multiple draggable elements and droppable targets, and listen to drag and drop events to move elements around.
Let’s try adding more droppable targets to our example:
Next steps
Now that you have a basic understanding of how to make elements draggable and droppable, you can explore the concepts covered in this quickstart guide in more detail:
DragDropProvider
Create drag and drop contexts for your draggable and droppable elements.
useDraggable
Learn how to make elements draggable with the useDraggable
hook.
useDroppable
Learn how to create droppable targets with the useDroppable
hook.
useSortable
Learn how to create sortable elements with the useSortable
hook.