Drag and Drop interactions are a fun and interactive way to engage your learners—and Claro makes it easy to do.
To add a drag and drop interaction:
- First you must add the elements you'd like to use to the stage.
- On the stage select the element you want to be your drop target.
- From the Interaction tab, select Drop Target from the Drop Settings section of the ribbon. If you want your draggable item to position itself in the center of the drop target upon release, select Snap To Center.
- On the stage, select the element you want to make draggable. From the Drag Settings section of the Interaction tab, select Draggable.
- If you want the draggable element to remain on top of the target and other elements, select Bring To Front.
- If you want the draggable element to return to its original position when dropped outside the target, select Put Back.
- Select Constrain Y if you want the draggable element to only move along the Y-axis (up and down).
- Select Constrain X if you want the draggable element to only move along the X-axis (left and right).
Tip: You can also add other actions to your page that are triggered when a drag motion starts or stops, or when the draggable item it put back or dropped. For more information on element interactions see our articles in the Interactivity and Animation topic.