<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.useDraggable
hook:<DragOverlay>
component so the draggable item can unmount from its original container while dragging and mount back into a different container without affecting the drag overlay.<DragOverlay>
, otherwise you'll need to set the draggable element to position: fixed
yourself so the item isn't restricted to the overflow and stacking context of its scroll container, and can move without being affected by the scroll position of its container.useDraggable
items are within a virtualized list, you will absolutely want to use a drag overlay, since the original drag source can unmount while dragging as the virtualized container is scrolled.<DragOverlay>
. <DragOverlay>
component should remain mounted at all times so that it can perform the drop animation. If you conditionally render the <DragOverlay>
component, drop animations will not work.<DragOverlay>
outside of your draggable components, and follow the presentational component pattern to maintain a good separation of concerns.<DragOverlay>
:@dnd-kit
.<Draggable>
and within <DragOverlay>
:<DragOverlay>
in a different container than where it is rendered, import the createPortal
helper from react-dom
:<DragOverlay>
. However, make sure that the components rendered within the drag overlay do not use the useDraggable
hook.children
of <DragOverlay>
rather than conditionally rendering <DragOverlay>
, otherwise drop animations will not work.DragOverlay
's children are rendered into, use the className
and style
props:dropAnimation
prop to configure the drop animation.duration
option should be a number, in milliseconds
. The default value is 250
milliseconds. The easing
option should be a string that represents a valid CSS easing function. The default easing is ease
.dropAnimation
prop to null
.<DragOverlay>
component should remain mounted at all times so that it can perform the drop animation. If you conditionally render the <DragOverlay>
component, drop animations will not work.<DragOverlay>
to the bounds of the window:<DragOverlay>
component does not have any transitions, unless activated by the Keyboard
sensor. Use the transition
prop to create a function that returns the transition based on the activator event. The default implementation is:<DragOverlay>
component renders your elements within a div
element. If your draggable elements are list items, you'll want to update the <DragOverlay>
component to render a ul
wrapper instead, since wrapping a li
item without a parent ul
is invalid HTML:z-index
zIndex
prop sets the z-order of the drag overlay. The default value is 999
for compatibility reasons, but we highly recommend you use a lower value.