id
argument is a string
or number
that should be a unique identifier, meaning there should be no other draggable elements that share that same identifier within a given DndContext
provider.useDraggable
and useDroppable
hooks, they can both share the same identifier since draggable elements are stored in a different key-value store than droppable elements.data
argument is for advanced use-cases where you may need access to additional data about the draggable element in event handlers, modifiers or custom sensors.data
attribute to store the index of the draggable 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 droppable nodes your draggable node can be dropped on:disabled
argument and set it to true
if you need to temporarily disable a draggable
element.attributes
property are sensible defaults that should cover a wide range of use cases, but there is no one-size-fits-all solution.useDraggable
listeners
to is already a native HTML button
element, 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 button
. "role"
attribute lets you explicitly define the role for an element, which communicates its purpose to assistive technologies."role"
attribute is "button"
. <button>
element for draggable elements.roleDescription
argument 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 roleDescription
value to something like "sortable product"
.tabindex
attribute dictates the order in which focus moves throughout the document.tabindex
value of 0
. tabindex="0"
(for example, div
and li
elements)tabindex
attribute set to 0
if they are not natively interactive elements (such as the HTML button
element).useDraggable
hook sets the tabindex="0"
attribute by default.active
DndContext
provider where the useDraggable
hook is used, the active
property will be defined with the corresponding id
, node
and rect
of that draggable element. active
property will be set to null
.isDragging
useDraggable
is used, the isDragging
property will be true
. Otherwise the isDragging
property will be false.isActive
property just checks if the active.id === id
.useDraggable
hook requires that you attach listeners
to 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.useDraggable
hook 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. setNodeRef
useDraggable
hook to function properly, it needs the setNodeRef
property 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:ref
should 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.node
setActivatorNodeRef
setNodeRef
is attached to.setActivatorNodeRef
, focus will automatically be restored on the first focusable node of the draggable node registered via setNodeRef.
over
over
value is defined. over
property will be defined for all draggable elements, regardless of whether or not those draggable elements are active or not.isDragging
property is true
.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
and y
coordinates represent the delta from the point of origin of your draggable element since it started being dragged.scaleX
and scaleY
properties 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.