The Drag & Drop component

Drag & drop allows to drag (with the finger or the mouse) an object to a container while keeping it selected. This is a classic interface feature, and it is widely used for games (puzzle, quiz...) or for product configurators.

To create a drag & drop, you need an object that moves (the moveable) and a container (the drop zone). With the Drag & Drop component, you can create your moveable, define a drop zone and create drag & drop related actions.

Create the draggable object

Click on Components and add the Drag & Drop. Double-click on the component to insert the visual element inside that will be moveable (for example an image).

In the properties, enable the option Moveable. An object can be both draggable and a drop zone.

You have several options:

Bring to front: the object is placed above the other objects when it is moved
Lock once dropped: once dropped, the object can no longer be moved
Ignore states after drop: this option allows you to manage the display of a large list of draggable objects within a multi-state component

Tip: To display a large list of draggable objects on the same screen, use a Multi-state component and a tab/panel layout: the draggable objects and the drop zone are created within this component. Each state corresponds to a panel/tab, and the user moves from state to state to browse the list and choose their draggable object.

Create the drop zone

Add a new component Drag & Drop. It can be empty.

In the properties, enable Drop Zone.

Select one or many draggable objects that are accepted on the drop zone. Click + Add and choose from the list of accepted draggable objects. An orange color visually indicates the draggable you have chosen.

Trigger an action when dragging

You can trigger an action when dragging a draggable object.

Select this object and add an action.

In the list of triggers, there are two specific triggers:

Dragging: when the user has placed their finger on your draggable object and begins their move
Return: when the user releases pressure on your draggable object and it is returned to its original location (no association with a drop zone)

Trigger an action after dropping

To create drop-off related actions, select your drop zone and you have access to new triggers:

Dropping {name of the draggable}: when your user releases pressure on your draggable object and the draggable object is properly positioned on the drop zone (successful association)
Entering {name of the draggable}: when your user reaches the area of the drop zone with the draggable object
Exiting {name of the draggable}: when your user exits the area of the drop zone with the draggable object

If your drop zone has multiple associations, these three triggers will be available for each draggable object.

Remove draggable

To add an action to remove one or all draggables, select your trigger (e.g. a button) > Interact with a component > Drag & Drop {the drop zone}.

You have the choice of. Remove all draggables or Remove one draggable.