Skip to main content

New Feature - Draggables

· 2 min read
Josh Setchfield
Yo Scenario

Draggable activity example

You can now make components draggable in Yo Scenario to allow players to move them around in the scenario player. To make components draggble simply check the Draggable option in the component's settings (left hand nav).

Getting clever with draggables​

Making a component draggable is great and fun for the player but you can really enhance the interactivity by combining a draggable component with the new events and actions. With the action editor to can perform an action when the draggable is dropped (the player stops dragging it) and can make this conditional based on whether it is dropped on a certain component or not. This means you can build interactive drag and drop interactions (such as the brain labeling example above).

New Event and conditions​

The new event available in the action editor for draggable components are On Dropped (when the player has stopped dragging it) and the new conditions are On Overlaps (when it overlaps a selected component) and On NOT Overlaps (when it is not overlapping a selected component). This means you can perform actions based on which component the draggable is dropped (or not dropped) on.

New Actions​

As well as the new event and conditions above we also have a few additional actions that are useful for draggables. These are Snap to component which moves the dropped component position to the selected component's position (you can choose which side to snap to) and Revert Position which move the dropped component back to its original position fro where it was dropped.

We think draggables (and droppables!) are a fantastic addition to Yo Scenario that open up a number of extra options for creating great activities and interactions. See the bran labeling example below.