Drag Overlay - @dnd-kit – Documentation
Home Examples Github Search ⌘ K Overview INTRODUCTION Installation Quick start API DOCUMENTATION DndContext Droppable Draggable useDraggable Drag Overlay Sensors Modifiers PRESETS Sortable GUIDES Accessibility Powered By GitBook Drag Overlay The component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport. When should I use a drag overlay? Depending on your use-case, you may want to use a drag overlay rather than transforming the original draggable source element that is connected to the useDraggable hook: If you'd like to show a preview of where the draggable source will be when dropped, you can update the position of the draggable source while dragging without affecting the drag overlay. If your item needs to move from one container to another while dragging, we strongly recommend you use the component so the draggable item can unmount from its original container while dragg
When should I use a drag overlay? Depending on your use-case, you may want to use a drag overlay rather than transforming the original draggable source element that is connected to the useDraggable hook: If you’d like to show a preview of where the draggable source will be when dropped, you can update the position of the draggable source while dragging without affecting the drag overlay. If your item needs to move from one container to another while dragging , we strongly recommend you use the <DragOverlay> component so the draggable item can unmount from its original container while dragging
Explore this link on the map →related reading
- Draggable - Legacy | dnd kitdocs.dndkit.com
- Getting Started - Legacy | dnd kitdocs.dndkit.com
- Sortable - Legacy | dnd kitdocs.dndkit.com
- Redirecting to: /legacy/api-documentation/context-provider/dnd-contextdocs.dndkit.com
- Installation - Legacy | dnd kitdocs.dndkit.com
- HTML Drag and Drop API - Web APIs | MDNdeveloper.mozilla.org
- Raindrop.ioapp.raindrop.io
- Chloe's Gardenchloeyan.me
- Transitions.dev — Essential transitions for web appstransitions.dev
- Grainradgrainrad.com
- Palantir Careers | Solving Technical Problemspalantir.com
- HTMLElement: drop event - Web APIs | MDNdeveloper.mozilla.org