Overview

The following video shows you how to move components around in the

Insert excerpt
_layers _layers nopanel true

 panel and on the screen.

Iframe
src https://youtube.com/embed/dNDLBy2vXWw?&rel=0&ytp-pause-overlay=&list=PLbPt6SI1Zhb8aOP-qz-KzSlB-VncvcIX- width 680px height 400px

When you move a component or layout,

Excerpt
To move an item you drag it onto another component

.

and:  drag and drop places a component next to the component on which you drop. This creates a sibling relationship.  shift+drag and drop

places

moves a component into the component on which you drop it. This creates a parent-child relationship. If you drag a component that is a parent, all its children move with it.

The location that PhixFlow places components on the screen canvas depends on whether the container is configured to flow in rows or columns; see Sizing and Positioning Screen Content. For example, if a container is set to flow:

• in rows, PhixFlow puts a component on the right
• in columns, PhixFlow puts a component below.   

Moving Using the 

Insert excerpt
_layers _layers nopanel true

 Panel

To move components on the screen canvas, we recommend that you use the 

Insert excerpt
_layers _layers nopanel true

 panel. This makes it easy to see container components that can be hard to select on the canvas. The hierarchical list also makes the parent-child relationships clear. You can select and drag an individual components or a group of components up and down the hierarchy to move them in the screen canvas.

To find a component in the Layers panel, on the screen canvas click a component to select it. PhixFlow automatically highlights it in the Layers panel.

• Move next to:
  In the Layers panel, click and drag a component to a different location in the list. 
  PhixFlow moves the component to be next to the component:
  • where you drop in the list
  • and also moves the component on the screen canvas.
• Move into:
  To move a layout or component inside another component, in the Layers panel, hold Shift and drag it onto a container component in the list. 
  PhixFlow moves the component into the component:
  • where you drop in the list
  • and also moves the component on the screen canvas.

Tip
The Layers panel  lists the components from the repository Layers section. You can also move components within the Layers section of the repository in the same way as you can move them in the Layout panel.

Moving Components on the Canvas

To move components around on the screen canvas:

• Move next to:
  On the canvas, click and drag a component and drop onto another component 
  PhixFlow moves the component next to the drop location. For example, if you drop a field on top of another field, PhixFlow puts them next to each other.
• Move into:
  On the canvas, Shift+click and drag and drop onto another component.
  PhixFlow moves the component inside the other component. For example, if you drop a field onto an area, PhixFlow puts the field into the area.

Preventing Accidental Dragging

To prevent accidental dragging of components and layouts on the screen, go to the components properties → Positional Settings section, and tick Prevent Dragging.

This will make items non-draggable on a screen, but they will remain draggable in the Layers and Repository.