Use the useDraggable
hook to make draggable elements that can dropped over droppable targets.
useDraggable
hook requires an id
and accepts all the same options as the Draggable
class. Refer to the Input section below for more information.
useDraggable
hook is a thin wrapper around the Draggable class that makes it easier to create draggable elements in React. It therefore accepts all of the same input arguments.useDraggable
hook accepts the following arguments:
type
.element
option instead of using the ref
that is returned by the useDraggable
hook to connect the draggable source element.handle
option instead of using the handleRef
that is returned by the useDraggable
hook to connect the drag handle element.true
to prevent the draggable element from being draggable.useDraggable
hook element is unmounted.useDraggable
hook returns an object containing the following properties:
handle
argument to the useDraggable
hook. Alternatively, you can consume the handleRef
ref callback to connect the drag handle element.
handleRef
will initiate the drag operation.<DragOverlay>
component.
<DragOverlay>
component will only render its children when a drag operation is in progress. This can be useful for rendering a completely different element while the draggable element is being dragged.
<DragOverlay>
component once per DragDropProvider component.<DragOverlay>
component should only rendered once, you can also pass a function as a child to the <DragOverlay>
component, which will receive the source
as an argument. This can be useful for rendering a clone of the source element while it is being dragged.