Drag & Drop in the Builder
Reordering page components used to mean navigating configuration menus, adjusting priority numbers, or using arrows that moved one position at a time. For pages with many components, rearranging the layout was tedious — fine for occasional adjustments, frustrating for iterative design work.
Drag and drop makes reordering as natural as rearranging papers on a desk.
How It Works
In the builder, hovering over any component reveals a grip handle — a vertically-aligned set of dots on the left edge of the component. Click and hold the grip handle, then drag the component to a new position. A placement indicator shows where the component will land. Release, and the component moves.
The whole interaction takes a second. Compare that to clicking through menu options to move something from position 4 to position 2 — the time savings add up quickly when iterating on a page layout.
Within Containers and Across Them
Components can be dragged within their current container — reordering items in a column, for instance — or moved to a different container entirely. Drag a component from the left column of a two-column layout to the right column. Drag a component from the main content area to the sidebar. Drop targets highlight as you drag to show valid placement zones.
The builder validates drops as you drag. If you're trying to drop a component somewhere it doesn't fit — a full-width component into a narrow slot, for instance — the drop zone is highlighted as invalid and the drop is prevented.
Works with the Hierarchy Panel
The component hierarchy panel in the sidebar also supports drag and drop. For dense pages where components are close together and hard to click precisely, the hierarchy view makes drag targets larger and clearer. Drag in the hierarchy to reorder, and the canvas updates to reflect the new order immediately.
Persistent Order
The order established by dragging is saved immediately. Reloading the builder or the live page shows the same order. No separate "save layout" step is required.
Reordering Fields and Columns
Drag and drop extends beyond top-level components. Field lists in forms, columns in tables, and items in navigation components all support drag reordering. The same grip-handle pattern applies. Reordering columns in a table is as simple as dragging a column header to the desired position in the column configuration list.