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.
The 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. isOver
property will become true.useDraggable
hook.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. transform
property will be populated with the translate
coordinates you'll need to move the item on the screen. transform
object adheres to the following shape: {x: number, y: number, scaleX: number, scaleY: number}
transform
over other positional CSS properties to move the dragged element. z-index
of your Draggable component to ensure it appears on top of other elements.<DragOverlay>
component.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.<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.