Drag from outside
Drag external items from a palette and drop them into the grid to create new blocks on the fly in this drag-from-outside dnd-grid React example.
How it works
Items do not have to originate inside the grid. This example makes an external palette draggable with the native HTML drag and drop API, then uses onDropDragOver to preview the incoming item's size and onDrop to commit it at the cell the pointer is over.
onDropDragOver returns the width and height the placeholder should take, so the grid can reflow underneath the cursor before the user commits. That preview is what makes an external drop feel like part of the grid rather than an append.
Related examples
- Toolbox — Move items between the grid and a separate toolbox panel, dragging blocks in and out of an off-grid tray in this toolbox dnd-grid React example.
- Kitchen sink — A full-featured layout builder with external drag, multi-select, an action bar, and an edit panel, showing everything dnd-grid can do in one React example.
- Dynamic add/remove — Add and remove grid items at runtime and watch the layout compact and reflow automatically in this dynamic add and remove dnd-grid React grid example.
- Basic example — A simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.