id
argument is a string
or number
that should be a unique identifier, meaning there should be no other droppable elements that share that same identifier within a given DndContext
provider.
If you’re building a component that uses both the useDroppable
and useDraggable
hooks, they can both share the same identifier since droppable elements are stored in a different key-value store than draggable elements.
disabled
argument and set it to true
if you need to temporarily disable a droppable
area.
data
argument is for advanced use-cases where you may need access to additional data about the droppable element in event handlers, modifiers or custom sensors.
For example, if you were building a sortable preset, you could use the data
attribute to store the index of the droppable element within a sortable list to access it within a custom sensor.
data
argument can be useful is create relationships between draggable nodes and droppable areas, for example, to specify which types of draggable nodes your droppable accepts:
setNodeRef
useDroppable
hook to function properly, it needs the setNodeRef
property to be attached to the HTML element you intend on turning into a droppable area:
node
setNodeRef
rect
isOver
isOver
boolean returned by the useDroppable
hook to change the appearance or content displayed when a draggable
element is dragged over your droppable container.
over
over
value is defined. Depending on your use-case, you can also read the id
of the other droppable that the draggable item to make changes to the render output of your droppable component.