Toolbox

How it works

A holding area beside the grid that items can be moved into and back out of. Sending an item to the toolbox removes it from the layout array and records it separately; restoring it puts an entry back and lets the compactor find it a home.

This keeps the grid itself simple — there is no second drag surface to coordinate, just two pieces of state and a pair of buttons. For a version where items are dragged between the two rather than clicked, see the drag from outside example.

Related examples

• 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.
• 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.
• Multiple instances — Run two independent dnd-grid instances on a single page, each with its own draggable and resizable layout state, in this multiple-instances 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.