Use direct canvas gestures to select the intended layer, reorder it inside layout, duplicate while dragging, or move it into another container without losing track of the resulting hierarchy.
Where: Canvas → select and drag an element
Key ideas
- Move follows parent layout: Dragging in Stack/Grid can reorder the element, while free-positioned content changes its coordinates.
- Reparent is explicit: Hold Cmd/Ctrl while dragging to place the element into another container; the drop indicator shows the intended hierarchy position.
- Duplicate while moving: Alt-drag leaves a copy and moves the duplicate, which is useful for repeated visual structures when component instances are not required.
Steps
- Select the element and confirm its current parent in Layers before moving it.
- Drag normally to reposition or reorder within the existing parent.
- To reparent, hold Cmd/Ctrl, hover the intended container until the drop indicator is correct, and release.
- To duplicate while moving, Alt-drag and verify which copy remains selected after the gesture.
- Inspect Layers plus responsive breakpoints, then undo immediately if the resulting hierarchy or order is not the intended one.
Tips
- Use Layers when overlapping elements make the canvas target ambiguous.
- Prefer a component instance over Alt-duplicated independent copies when all copies should inherit future structural updates.
Troubleshooting
Dragging changes order instead of x/y position
The parent uses flex/grid/stack layout. Change the layout or position mode only if free positioning is actually intended.
The element landed in the wrong container
Undo, expand Layers, and retry Cmd/Ctrl-drag while watching the drop indicator and target parent.