<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.
<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: fixedyourself 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.
useDraggableitems 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>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>. However, make sure that the components rendered within the drag overlay do not use the
<DragOverlay>rather than conditionally rendering
<DragOverlay>, otherwise drop animations will not work.
dropAnimationprop to configure the drop animation.
durationoption should be a number, in
milliseconds. The default value is
easingoption should be a string that represents a valid CSS easing function. The default easing is
<DragOverlay>to the bounds of the window:
<DragOverlay>component renders your elements within a
divelement. If your draggable elements are list items, you'll want to update the
<DragOverlay>component to render a
ulwrapper instead, since wrapping a
liitem without a parent
ulis invalid HTML: