Drag-and-drop reordering blocks in the editor
Every content block in the VeloCMS editor has a drag handle on the left edge. Grab it and reorder paragraphs, headings, images, and code blocks without cutting and pasting.
Every content block in the VeloCMS editor — paragraphs, headings, images, code blocks, callouts, embeds — has a drag handle that appears when you hover over the left edge. Click and hold the handle, then drag the block to any position in the document. A blue insertion line shows the target drop position. Release to place the block.
How to access the drag handle
Hover over any block in the editor. After about 200ms, a six-dot vertical handle icon appears at the left margin. On touch devices (iPad, Android tablet), press and hold the block for 300ms to enter drag mode — a haptic pulse confirms you're in drag mode. Then drag to reposition.
The drag handle is not visible while you're actively typing. Finish your sentence, click outside the text cursor, then hover to reveal the handle. This prevents accidental drags while editing.
Reordering sections of a long article
For long articles, drag-and-drop reordering is most useful when restructuring sections after a draft is complete. Instead of selecting an entire section, cutting, scrolling, and pasting — common in traditional editors — you grab the h2 heading block and drag it. Because the VeloCMS editor stores the document as a block tree (not a single flat text node), each heading and its following paragraphs move together as a unit when you drag the heading block.
Keyboard alternative for accessibility
Drag-and-drop is fast but requires fine motor control. If you prefer keyboard navigation, select any block (click anywhere inside it, then press Escape to select the block), then use Alt+Up or Alt+Down to move it one position up or down in the document. This keyboard shortcut works for all block types including embedded images and code blocks.
Drag-and-drop reordering uses dnd-kit under the hood — the same library powering the page builder block drag system. For information on the page builder specifically, see 'How do I use the visual page builder to create landing pages'.