How to Use Drag & Drop Layout in FMX for iPadOS

Updated Today · 8 min read

Drag & Drop Layout gives iPad guests control over the final photo arrangement. FMX displays the active photo layout with a tray containing eligible photos from the current session. Guests drag photos into the layout spaces, replace or reuse them as desired, and select Next when the arrangement is complete.

Use it for interactive photo strips, collages, and AI experiences where guests should decide which result appears in each position.

Important: Place Drag & Drop Layout after its Raw Photo and AI source steps and before Save Final Photo. The final photo must be saved after the guest makes the arrangement so printing and sharing use the selected order.

Before You Start

Prepare the following:

Requirement	What you need
Photo layout	An active Photo Layout containing at least one Camera element
Source photos	Raw Photos, AI Raw Photos, or both from the current session
Workflow order	Capture and AI steps before Drag & Drop Layout; Save Final Photo after it
Device test	The physical iPad, mounted in its production orientation
Output test	A completed session through Preview, printing, and sharing

Only the active guest's session photos are shown. Photos from previous sessions are not offered in the tray.

How Layout Spaces Work

Each distinct Camera element index in the active layout becomes a space the guest must fill.

Give each independently selectable opening its own capture position in the layout.
Camera elements that share the same index share one photo assignment.
Guests can place one source photo into several spaces.
Dropping onto a filled space replaces its current photo.

Open the Layout Builder and confirm that each intended photo opening is a Camera element. Check the element's scaling mode and the layout's portrait or landscape design before building the workflow.

1. Build the Workflow in Foto Master Cloud

A typical Raw Photo flow is:

Take Photo steps → Drag & Drop Layout → Save Final Photo → Preview → Print Copies or Sharing

A typical AI flow is:

Take Photo and AI steps → AI processing completes → Drag & Drop Layout → Save Final Photo → Preview → Print Copies or Sharing

Add the source photos

Add each required Take Photo step.
Add any AI steps whose results should appear in the tray.
Connect AI completion or processing steps so the workflow does not reach photo selection too early.
Select the Photo Layout that guests will arrange.

FMX allows one source to be reused, but capture enough different photos to give guests a useful choice.

Add Drag & Drop Layout

On the workflow canvas, select Add Step.
Open the Feature steps and add Drag & Drop Layout.
Place it after all source-producing steps.
Connect one normal outgoing edge from Drag & Drop Layout to Save Final Photo.
Optionally rename the node to create a custom guest-facing title. The default title shown on iPad is Choose Your Photos.

The step advances from its own Next button after the layout is complete. Avoid an automatic timed transition that could compete with guest selection.

2. Configure Drag & Drop Layout

Select the node and configure these fields:

Setting	Options	What it controls
Type	Raw Photo, AI Raw Photos, or both	Which session-owned photos the tray offers. At least one type is required.
Raw Photos Placement	Right, Left, Top, Bottom	The edge of the iPad screen used for the photo tray.
Fit container height to content	On or Off	Used for Left/Right trays; adapts each tray holder's height to the image ratio.
Fit container width to content	On or Off	Used for Top/Bottom trays; adapts each tray holder's width to the image ratio.
Image Fit	Crop, Fit, Fill	Available when fit-container is off; sizes photos inside fixed tray holders.

Choose the source Type

Raw Photo shows original captures from the current session.
AI Raw Photos shows AI results associated with those captures.
Selecting both shows the complete available collection and is the default.

The tray refreshes while the screen is open, allowing late AI results to appear automatically.

iPadOS fallback: If AI Raw Photos is the only selected type and no AI result is available, FMX temporarily shows the session's Raw Photos so the guest is not trapped at an empty screen. When AI output arrives, the tray returns to the configured AI sources. Any Raw Photo already placed remains assigned.

If an AI result is mandatory, keep the guest in an AI processing/wait step until it succeeds before entering Drag & Drop Layout. Do not depend on the fallback as proof that AI completed.

Choose the tray position

Left or Right places a vertical tray beside the layout.
Top or Bottom places a horizontal tray above or below the layout.

Choose the setting on the physical iPad. A side tray can work well for landscape screens, while a top or bottom tray may preserve more layout width in portrait, depending on the authored layout.

Choose container and image fitting

Keep the fit-container option on when photos have mixed portrait and landscape ratios. The holder follows each photo's ratio without cropping, letterboxing, or stretching. This option changes tray cards only; the authored layout and Camera elements remain unchanged.

With fit-container off, Image Fit provides three fixed-holder options:

Crop fills the holder while preserving ratio and trims overflow.
Fit shows the entire photo and may leave unused space.
Fill stretches the photo and can distort its proportions.

3. Save, Sync, and Test on the iPad

Save the workflow and experience in Foto Master Cloud.
Open FMX on the production iPad and sync the event.
Confirm the intended Photo Layout is active.
Run a new session and create every expected source photo.
Arrange the layout using normal guest touch gestures.
Continue through Save Final Photo, Preview, Print Copies, and all sharing steps.
Inspect the final file and a physical print, if printing is part of the event.

Test with the iPad locked in the same orientation and booth mount used at the venue. The tray becomes more compact on smaller iPads, so verify that guests can still reach and scroll every source.

4. Guest Operation on iPadOS

When the step opens:

The guest sees Choose Your Photos, the current layout, the photo tray, and placement progress.
To place a photo, the guest begins on a photo card and drags it toward the layout.
The target space highlights while the photo is over it.
Releasing inside the target assigns the photo and refreshes the preview.
To replace a choice, drag another photo onto the occupied space.
To reuse a photo, drag the same card into another space.
When every distinct space is filled, the Next button becomes enabled.
Selecting Next continues the workflow.

When the tray contains more photos than fit on screen, swipe along the tray to scroll. Start the placement gesture on the photo card and move toward the layout; use the tray direction for scrolling.

Re-entering the same node with the same layout restores the guest's choices. Switching to a different layout starts a new arrangement.

What Happens to the Final Photo

The completed selection tells FMX which exact session photo belongs in each Camera position. Save Final Photo composes the active layout from that mapping instead of using normal capture order. Preview, printing, email, SMS, QR sharing, and gallery upload then use the saved output.

The step's Image Fit setting controls tray-card appearance only. Each Camera element's own scaling mode controls the final composition.

Troubleshooting

The step is skipped

Confirm that the workflow has at least one source Type selected.
Confirm that the active layout contains Camera elements.
Confirm that at least one photo was captured in the current session.
Sync the event again after changing the layout or workflow.

If the setup is invalid or the session contains no captured photos, iPadOS advances using the normal capture-order layout behavior rather than leaving the guest on an unusable screen.

Raw Photos appear in an AI-only workflow

This is the iPadOS safety fallback. No eligible AI result was available when the tray refreshed.

Confirm that the AI step completed successfully.
Add or lengthen the AI processing path before Drag & Drop Layout.
Watch for the tray to return to AI sources when the result arrives.
If guests may choose either version, select both Raw Photo and AI Raw Photos intentionally.

Next remains disabled

Check the progress count and fill every distinct layout space.
Drag the photo farther into the target before releasing it.
Confirm that a retake or cleanup action did not remove a source after it was placed.

Swiping moves the tray instead of the photo

Begin directly on the photo card.
Drag toward the layout rather than along the tray's scrolling direction.
Use blank tray space or a swipe along the tray when you intend to scroll.

One photo appears in several layout positions

If a single drop fills repeated positions, those Camera elements share one index. This is valid for repeated-image designs. For independent guest choices, edit the layout so the openings use separate capture positions.

Photos look cropped or stretched in the tray

Turn on the fit-container setting.
If fixed holders are required, choose the appropriate Crop, Fit, or Fill mode.
Adjust the Camera element itself if the problem appears in the final saved layout rather than only in the tray.

The final output uses capture order

Move Save Final Photo after Drag & Drop Layout.
Confirm that the workflow did not change layouts after the guest arranged the photos.
Confirm that the session did not skip the feature because there were no captures or no Camera elements.
Sync and run a completely new test session.

See Workflow Builder Overview for FMX for iPad, Layout Builder Overview, and Save Final Photo in the Step Types Reference for the surrounding workflow and layout steps.

Was this helpful?