Drag and drop | Pinegrow Docs

Let’s take look at the basics first:

What can I drag? Where I can drop?

You can drag elements from:

the Library panel
the page view,
the tree.

You can drop the dragged elements on:

the page view or
the tree.

When dragging the element over the page view the orange line will show where in relation to the target element (highlighted with green border) will the element be placed.

Press ESC to abort a drag & drop operation.

Moving and cloning

When you grab an existing element and drag it somewhere else the default behaviour is to move the element.

Hold down the ALT to clone the element instead.

A column dragged over the poem text with an orange Prepend marker, and a tooltip saying to press ALT to clone, with a Hold ALT to clone callout. — Hold ALT down to clone the element.

Grab & move

You don’t have to select the element before grabbing and moving it.

Hold down the mouse when the element is highlighted with the green border. Wait for about half second without releasing the mouse button and the drag & drop operation will begin.

The Pine Tree Poems title box outlined in green on the page, with a callout reading "Just grab it!" pointing to it. — Grab & move elements.

Use ALT to clone the element instead of moving it.

Press ESC to abort a drag & drop operation.

A pro tip: you can begin the move without waiting for half a second. Just hold down the mouse button, start the move and drag & drop will start half a second into the move.

Inserting N elements with Repeater

All drag & drop operations work with Repeater. If you wish to insert 12 copies of the dragged element, type “1” and “2” before or during the drag operation.

Page toolbar showing a repeat count of x 10 on the "Pine Tree Poems" title box, with a callout reading "Type 0 or click to clear". — Use repeater to insert many elements with one move.

Dragging multiple elements

When multiple elements are selected on the page, and you drag one of them, all of the selected elements will follow and be inserted right after the moved element, regardless of how they were positioned before the move.

Inserting element into multiple selected elements

When you drop an element into or next to one of the multiple selected elements, Pinegrow will try to repeat the same operation on all other selected elements.

For example, if you have three Team members selected and drop a button into the first one…

A Button being dragged over the name of the first team member card, with an Insert after marker, and a callout "Inserting button in one team member". — Inserting elements into multiple selected elements.

…Pinegrow will insert buttons in the other two Team members, at the same position.

Three team member cards, each with a heading and an orange Label button inserted, with a callout saying the button is inserted in every card. — Pinegrow inserts the element into all other selected elements.

Rearranging the layout of multiple selected elements

When you move an element within one of the multiple selected elements, Pinegrow will try to repeat the same move on all other selected elements.

So, continuing with our Team members example, if we select all Team members and then move the name before the image in the first Team member:

A button being moved within the first team member card, with an Insert after marker and a tooltip saying to press ALT to clone. — Moving the button in one of the selected elements…

Pinegrow will make the same move on other Team members - if possible.

Three team member cards with an orange Label button in each, with a callout saying the move applies to the button in every team member. — …moves the button in all other selected elements.

For this to work you have to move the element without selecting it first. This can be done with grab & move or using the tree.