Eager to get started? This quick start guide will help you familiarize yourself with the core concepts of dnd kit.
useDraggable
and useDroppable
hooks to function correctly, you’ll need to ensure that the components where they are used are wrapped within a <DndContext />
component:
useDroppable
hook.useDroppable
hook isn’t opinionated about how your app should be structured. At minimum though, it requires you pass a ref to the DOM element that you would like to become droppable. You’ll also need to provide a unique id
attribute to all your droppable components.
When a draggable element is moved over your droppable element, the isOver
property will become true.
useDraggable
hook.
The useDraggable
hook isn’t opinionated about how your app should be structured. It does however require you to be able to attach listeners and a ref to the DOM element that you would like to become draggable. You’ll also need to provide a unique id
attribute to all your draggable components.
After a draggable item is picked up, the transform
property will be populated with the translate
coordinates you’ll need to move the item on the screen.
The transform
object adheres to the following shape: {x: number, y: number, scaleX: number, scaleY: number}
transform
object to a string can feel tedious. Fear not, you can avoid having to do this by hand by importing the CSS
utility from the @dnd-kit/utilities
package:
<DndContext>
component so you can add event listeners to be able to respond to the different events that are fired.
In this example, we’ll assume you want to move your <Draggable>
component from outside into your <Droppable>
component:
onDragEnd
event of the <DndContext>
to see if your draggable item was dropped over your droppable:
<DndContext>
, useDroppable
and useDraggable
by reading their respective API documentation.