useDroppablehooks, they can both share the same identifier since draggable elements are stored in a different key-value store than droppable elements.
dataargument is for advanced use-cases where you may need access to additional data about the draggable element in event handlers, modifiers or custom sensors.
dataattribute to store the index of the draggable element within a sortable list to access it within a custom sensor.
dataargument can be useful is create relationships between draggable nodes and droppable areas, for example, to specify which types of droppable nodes your draggable node can be dropped on:
attributesproperty are sensible defaults that should cover a wide range of use cases, but there is no one-size-fits-all solution.
listenersto is already a native HTML
buttonelement, although it's harmless to do so, there's no need to add the
role="button"attribute, since that is already the default role of
"role"attribute lets you explicitly define the role for an element, which communicates its purpose to assistive technologies.
roleDescriptionargument can be used to tailor the screen reader experience to your application. For example, if you're building a sortable list of products you'd want to set the
roleDescriptionvalue to something like
tabindexattribute dictates the order in which focus moves throughout the document.
tabindexattribute set to
0if they are not natively interactive elements (such as the HTML
useDraggablehook sets the
tabindex="0"attribute by default.
DndContextprovider where the
useDraggablehook is used, the
activeproperty will be defined with the corresponding
rectof that draggable element.
activeproperty will be set to
useDraggableis used, the
isDraggingproperty will be
true. Otherwise the
isDraggingproperty will be false.
isActiveproperty just checks if the
active.id === id.
useDraggablehook requires that you attach
listenersto the DOM node that you would like to become the activator to start dragging.
setNodeRef, there are actually a number of key advantages to forcing the consumer to manually attach the listeners.
useDraggablehook is as simple as manually attaching the listeners to a different DOM element than the one that is set as the draggable source DOM node:
document. Once click on one of the draggable nodes happens, React's listener on the document dispatches a SyntheticEvent back to the original handler.
useDraggablehook to function properly, it needs the
setNodeRefproperty to be attached to the HTML element you intend on turning into a draggable element so that @dnd-kit can measure that element to compute collisions:
refshould be assigned to the outer container that you want to become draggable, but this doesn't necessarily need to coincide with the container that the listeners are attached to.
setNodeRefis attached to.
overvalue is defined.
overproperty will be defined for all draggable elements, regardless of whether or not those draggable elements are active or not.
transformproperty will be populated with the
translatecoordinates you'll need to move the item on the screen.
transformobject adheres to the following shape:
ycoordinates represent the delta from the point of origin of your draggable element since it started being dragged.
scaleYproperties represent the difference in scale between the element that is currently being dragged and the droppable it is currently over, which can be useful if the draggable item needs to be dynamically resized to the size of the droppable it is over.