useDraggable
hook turn DOM nodes into draggable sources that can be picked up, moved and dropped over droppable containers.useDraggable
hook isn't particularly opinionated about how your app should be structured. setNodeRef
function that is returned by the useDraggable
hook to a DOM element so that it can access the underlying DOM node and keep track of it to detect collisions and intersections with other droppable elements. id
argument is a string 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
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. transform
property as CSS to your draggable element.transform
CSS property to move your draggable item on the screen, as other positional properties such as top
, left
or margin
can cause expensive repaints. Learn more about CSS transforms.transform
property will be populated with the translate
coordinates you'll need to move the item on the screen. The transform
object adheres to the following shape: {x: number, y: number, scaleX: number, scaleY: number}
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 item that is dragged and the droppable container it is currently over. This is useful for building interfaces where the draggable item needs to adapt to the size of the droppable container it is currently over.CSS
helper is entirely optional; it's a convenient helper for generating CSS transform strings, and is equivalent to manually constructing the string as such:useDraggable
hook provides a set of sensible default attributes for draggable items. We recommend you attach these to the HTML element you are attaching the draggable listeners to.useDraggable
listeners
to is already a semantic button
, although it's harmless to do so, there's no need to add the role="button"
attribute, since that is already the default role. role
"button"
<button>
element for the DOM element you plan on attaching draggable listeners to. role="button"
attribute, which is the default value.tabIndex
"0"
tabindex
attribute set to 0
if they are not natively interactive elements (such as the HTML button
element). For this reason, the useDraggable
hook sets the tabindex="0"
attribute by default.aria-roledescription
"draggable"
draggable
is a sensible default, we recommend you customize this value to something that is tailored to the use case you are building.aria-describedby
"DndContext-[uniqueId]"
aria-describedby
ID that points to the screen reader instructions to be read out when a draggable item receives focus.touch-action
touch-action
CSS property for all of your draggable elements.Thetouch-action
CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser). Source: MDN
touch-action
property to none
for draggable elements in order to prevent scrolling on mobile devices. touch-action: none;
is the only way to reliably prevent scrolling for pointer events.touch-action: none;
is currently the only reliable way to prevent scrolling in iOS Safari for both Touch and Pointer events. touch-action
to none
only for the drag handle, so that the contents of the list can still be scrolled, but that initiating a drag from the drag handle does not scroll the page.pointerdown
or touchstart
event has been initiated, any changes to the touch-action
value will be ignored. Programmatically changing the touch-action
value for an element from auto
to none
after a pointer or touch event has been initiated will not result in the user agent aborting or suppressing any default behavior for that event for as long as that pointer is active (for more details, refer to the Pointer Events Level 2 Spec).<DragOverlay>
component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport.