Smooth Drag & Drop for Layouts
Drag and drop interactions are a common promise in builder tools, but the quality of the implementation varies dramatically. Janky interactions — elements that lag, snap erratically, or jump to the wrong position — undermine confidence in the tool and make layout work tedious. A smooth, predictable drag experience is the difference between a tool that feels professional and one that feels prototypal.
We've rebuilt the drag and drop system for layout editing, and the difference is immediately noticeable.
What Changed
Smooth animation: Dragged elements follow the cursor smoothly. Other elements in the layout flow around the dragged component in real time, giving you continuous visual feedback about where the component will land. There's no delay between dragging and the layout responding.
Ghost element: While dragging, the original position shows a ghost — a placeholder that indicates where the component was. This helps you understand the displacement happening as you drag.
Valid drop zones highlighted: Drop zones that accept the component being dragged are highlighted as you approach them. Invalid drop zones are visually distinct, preventing accidental drops in unsupported positions.
Snap on release: Releasing the drag drops the component precisely into the nearest valid position. There's no ambiguity about where it landed.
Sections and Columns
The updated drag system works for both high-level page sections (rows, columns, panels) and lower-level components within a container. Dragging a section reorders sections on the page. Dragging a component within a column reorders within the column. Dragging a component across the column divider moves it between columns.
Each drag type has distinct visual indicators so you know whether you're moving within a container or across container boundaries.
Nested Layout Support
Dragging into and out of nested containers is supported. Drag a component from an outer column into a nested sub-layout. Drop it accurately using the expanded drop zone that appears when hovering over a container.
Deep nesting can make drag operations complex. The system handles this by showing a clear breadcrumb of the current drop target — "Dropping into: Right Column > Top Section" — so you always know exactly where the component will land.
Undo Integration
Every drag operation is undoable. Moved a component to the wrong place? Undo. The drag operation is a first-class edit in the builder's history, with the same undo/redo behavior as any other change.