drag&drop component

If you want to add fun modules to your application, you’ll be happy to learn about the Drag & Drop component.

When you create a Drag & Drop action, you enable users to move elements around with their fingers and place them in a specific zone.

1. Creating a Drag & Drop action

a. The idea

A Drag & Drop action is composed of two types of objects: 

  • objects that can be moved (“draggable” - e.g. a banana peel) 
  • objects that can receive draggable items (“droppable” - e.g. a trash can).

You need to use the Drag & Drop component for each object, define their role (draggable or droppable) and then match up the draggable and droppable elements!

But beware, not all draggable objects are accepted by droppable objects: you need to define matching associations.

b. Create

Click on the Drag & Drop icon in the Components menu, add a component for each object you need (draggable and droppable) and double-click on each zone to edit its content.

c. Configure

These are the options listed in the Properties window:

  • User interaction: this option allows users to enjoy all the features of this component (here, drag & drop). By default, this option is always checked. If you uncheck this option, users won’t be able to drag & drop.

  • Options: this is where you determine whether your component is draggable, droppable or both.

parameters.png

At this stage, don’t forget to rename all your objects. This will make it easier for you to spot them and define their actions in the next steps!

d. Associate

You now need to identify the draggable object(s) that are accepted by your droppable object. This operation is only available in the Properties window of the droppable object. Click on + ADD DRAGGABLE and choose the draggable objects you want to accept from the list.

association.png

2. For more interactivity

 Note: this section is intended for users already familiar with interactivity. If this is not your case, we strongly recommend you read the article Learn about triggers.

Your Drag & Drop feature can go even further and give you access to new types of triggers linked to your Drag &Drop action. In other words, more freedom and interactivity in your creative process! :-)

a. Triggers for your draggable object

Select your draggable object and click on the Interactivities icon. In the basic triggers list, you’ll find new options:

drag and drop

  • Dragging: this is when the user has just placed his/her fingers on your draggable object and is starting to move it.

  • Return: this is when the user prematurely releases the pressure on your draggable object, which in that case automatically returns to its initial place (no association with a droppable object)

b. Triggers for a matching association

To create actions linked to an association, please select your droppable object (once you've defined a matching association!): this gives you access to new triggers.

drag and drop``

  • Dropping: this is when the user has released the pressure on your draggable object and is properly positioned on the droppable object (matching association)

  • Entering: this is when your user has reached the droppable zone with the draggable object

  • Exiting: this is when the user has left the droppable zone with the draggable object.

Be careful: if your droppable object has several matching associations: there will be 3 new triggers for each one.

Was this article helpful?
1 out of 1 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!