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.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.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
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.