HomeKnowledge BaseDrag & Drop
App Builder

Drag-and-Drop Builder: Arranging Sections on Your Page

Learn how to drag blocks from the palette onto your canvas, place them exactly where you want, and rearrange sections as your layout evolves.

5 min read5 sectionsUpdated Mar 2026

1   How drag-and-drop works in MobiDrag

The App Builder uses a vertical stacking model. Your page is built by placing blocks one on top of another — like rows in a mobile layout. You drag a block from the left panel (the block palette) and drop it onto the center canvas (the phone preview).

Once blocks are on the canvas, you can drag them up or down to change their order at any time.

Left panel with block palette and center canvas showing phone preview
App Builder — left panel palette and center canvas side by side

2   Dragging a block from the palette to the canvas

Every block in the left panel has a drag handle — six dots (⋮⋮) in the top-right corner of each card. That is the grab point for drag-and-drop.

Hero Banner block card showing the six-dot drag handle
Block card — ⋮⋮ drag handle in top-right corner
  1. 1In the left panel, find the block you want to add. Use Search here... to filter by name if needed.
  2. 2Hover over the block card. The ⋮⋮ handle appears in the top-right corner of the card.
  3. 3Click and hold the handle, then drag the card towards the phone canvas in the center.
  4. 4A blue drop indicator shows the position where the block will land. Move up or down to choose placement.
  5. 5Release the mouse to drop the block into place. It appears on the canvas immediately and its settings open in the right panel.
Design Blocks palette showing Hero Banner, Collection Image, Product Grid
Design Blocks palette — all available blocks with drag handles
✨

Can't find a block? Type its name in the search bar at the top of the left panel. The palette filters in real time as you type.

3   Reordering blocks already on the canvas

To change the order of blocks that are already on the page, hover over any block on the canvas. A small toolbar of icons appears at the top-right corner of the hovered block.

Canvas block showing action toolbar on hover
Canvas block hovered — action toolbar with drag handle, edit, duplicate, delete
  1. 1Hover over the block you want to move. The action toolbar appears at the top-right of the block.
  2. 2Grab the ⋮⋮ handle on the left of the toolbar.
  3. 3Drag the block up or down within the canvas.
  4. 4A drop indicator shows the new position. Release to place it. All surrounding blocks shift automatically.
Canvas showing stacked blocks representing the vertical layout of a page
Canvas — multiple blocks stacked on the page

4   Fixed-position blocks (Header & Navigation)

Three blocks ignore vertical positioning and always lock to specific zones:

BlockPositionBehavior
HeaderTop of every pageLocked to the top — cannot be moved into the page body
Bottom NavigationBottom of every pageLocked to the bottom — always visible above content
Side NavigationSlide-out overlayDoes not participate in vertical layout — overlays all content

These three blocks are also global — they appear on every page of your app. Editing them on one page updates them everywhere.

⚠️

If you try to drag the Header or Bottom Navigation blocks to a different position on the canvas, they will snap back to their fixed zones.

5   Tips for smooth layouts

  • Plan top to bottom: Mobile users scroll vertically. Put your most important content (hero banner, featured collections) near the top.
  • Use Undo freely: Press Ctrl + Z / Cmd + Z to undo any misplaced drag.
  • Duplicate before editing: Use the copy icon in the block toolbar to duplicate a block before changing it — a quick way to compare variations.
  • Spacing blocks: Use a Spacer block to add breathing room between sections without editing individual block padding.