The Drag & Drop component

The Drag & Drop component allows you to create dynamic interactions where the user can drag an element to a specific location. 

This functionality is particularly useful for creating educational activities, interactive games (puzzles, quizzes, etc.), or dynamic user interfaces.

Use cases

• Education: Create interactive exercises, such as matching images to words or categorizing elements.
• Gamification: Develop games based on puzzles or challenges where users must drag and drop objects to the correct location.

Setting up the component

To create a drag & drop action, you need a moving object (the draggable) and a container (the drop zone). With the Drag & Drop component, you can create your draggable object, define a drop zone, and create actions related to the drag & drop.

Create the draggable object

In the Components window, click on Drag & Drop. Double-click on the component to insert the object that will be draggable (for example, an image).

In the properties, check the Movement option to make the object draggable. Note that an object can be both draggable and a drop zone. 

You have several other properties: 

• Above objects: The object is placed above other objects during its movement.
• Lock after drop: Once dropped, the object can no longer be moved.
• Ignore states after drop: This option manages the display of a large list of draggable objects within a multi-state component.

Define the drop zone

Add another Drag & Drop component. This component can be empty and placed over a graphic element that symbolizes the location. 

In the properties, check the Drop Zone box.

Choose whether to limit the number of draggable objects that can be dropped there. Click on + Add to select the draggable objects accepted in this zone. An orange color visually indicates the selected draggable object.

Interactive actions

Trigger an action related to movement

You can trigger an action during the movement or the return to its initial position of the draggable object. 

Select your draggable object and add an action. Choose from the triggers:

• Drag: When the user places their finger on your draggable object and begins moving it.
• Return: When the user releases the draggable object and it returns to its initial position (no association with a drop zone).

Trigger an action after dropping

To create an action related to the drop, select your drop zone.

Choose from the triggers:

• Drop {draggable_name}: When the user releases the draggable object and it is successfully placed in the drop zone.
• Enter {draggable_name}: When the user moves the draggable object into the drop zone.
• Exit {draggable_name}: When the user moves the draggable object out of the drop zone.

Remove draggables

You can create an action to automatically reset draggable objects to their original position.

Select a trigger (e.g., a button) and the action  Act on a component > Drag & Drop {drop zone}.

You can choose between Remove all draggables or Remove a draggable.

Logic and conditions

In a puzzle or activity where it’s necessary to verify whether pieces have been placed in the correct location, adding validation logic is crucial. The Condition component is a simple and effective solution for checking whether each piece has been dropped in the correct zone. 

Here’s how to proceed:

• Add a Condition component.
• Define the condition "All pieces have been placed correctly" based on each drop zone.
• Ensure each drop zone contains the correct piece.
• Associate an action, such as displaying a message or triggering an animation, when all pieces are correctly placed.

If you want to track overall progress (e.g., how many pieces have been correctly placed), you can use variables with the PandaSuite database. However, this method requires managing cases where users move pieces back.

Best practices and tips

Large list of draggables

If you have a large list of draggable objects on the same screen, use a Multi-state component and present it as tabs/panels, placing the draggable objects and drop zones within this component. 

Each state corresponds to a panel/tab, and the user navigates through the states to select draggable objects and interact with the drop zones. 

Examples

• Create a drag-and-drop game
• Create a puzzle