Drag-and-drop interactions are just plain fun. And they’re easy to create in Storyline 360 and Storyline 3. In this tutorial, you’ll learn two techniques.

First, we’ll create a drag-and-drop interaction using triggers. Then, we’ll create another interaction by converting an existing slide to a freeform drag-and-drop interaction.

Watch the videos and follow the practice activities below.

  1. Create a Drag-and-Drop Interaction with Triggers
  2. Convert an Existing Slide to a Freeform Drag-and-Drop Interaction

Practice Activity: Create a Drag-and-Drop Interaction with Triggers

In this activity, we’ll use some simple triggers to perform three drag-and-drop actions. First, we want a refrigerator in our interaction to open when ice cream is dragged over it. Watch this demo, then follow the steps below to practice.

  1. Open the Storyline folder in your practice files, then open the 03F_drag_drop_interactions_360.story file and go to the third slide in the project.

    There are duplicate slides in the sample project. The first two slides are demos so you can preview the finished examples. We’ll use the last two slides to create drag-and-drop interactions in this tutorial.
  2. Select the fridge object on the slide, then go to the states panel below the slide. Notice that the fridge has two states, normal and open. Let’s add a trigger to open the fridge when the ice cream is dragged over it. Click the Create a new trigger button (looks like a blank piece of paper) in the triggers panel.
  3. When the trigger wizard appears, assign these values to your trigger and click OK.
    • Action: Change state of
    • On Object: Fridge
    • To State: Open
    • When: Object dragged over
    • Object: Ice Cream
    • Hover Over: Fridge

Next, we want the fridge to close when the ice cream is dragged away from it.

  1. To close the fridge, we’ll use another trigger, but first we need to add a hotspot to define the drag area. Go to the Insert tab on the ribbon, click Hotspot, and choose Rectangle.
  2. Now click and drag to cover the entire slide with a rectangle hotspot. (A new trigger automatically gets added to the triggers panel for each hotspot. We won’t need this trigger, so you can delete it.)
  3. Select the hotspot and go to the timeline panel below the slide. Drag the hotspot item down the panel until it’s below (or behind) the fridge and the ice cream. Then double-click the title of the hotspot and rename it Closed Target. (It’s always a good idea to give objects recognizable names so you can identify them when you add triggers.)
  4. Let’s add a trigger to close the fridge. Click the Create a new trigger button in the triggers panel.
  5. When the trigger wizard appears, assign these values to your trigger and click OK.
    • Action: Change state of
    • On Object: Fridge
    • To State: Normal
    • When: Object dragged over
    • Object: Ice Cream
    • Hover Over: Closed Target

Finally, we want the refrigerator to close and the ice cream to disappear when the ice cream is dropped onto the fridge. This requires a trigger for the refrigerator and a new state for the ice cream. Watch this video demo, then follow the steps below to practice.

  1. We need a trigger to close the fridge when the ice cream is dropped on it. Click the Create a new trigger button in the triggers panel.
  2. When the trigger wizard appears, assign these values to your trigger and click OK.
    • Action: Change state of
    • On Object: Fridge
    • To State: Normal
    • When: Object dropped on
    • Object: Ice Cream
    • Dropped On: Fridge
  3. To make the ice cream disappear, we just need to add a new state to the ice cream. Select the ice cream object on the slide, then go to the states panel below the slide and click Edit States.
  4. Click the New State button (looks like a blank piece of paper) in the states panel, select Drop Correct from the drop-down list, and click Add.
  5. The new drop-correct state will initially look like the normal state, but you can customize it. In this case, we want the ice cream to disappear, so click the ice cream object on the slide and click Delete on your keyboard. Essentially, the drop-correct state should be empty or invisible for this interaction.

    The drop-correct state is a built-in state that doesn’t require a trigger to invoke it. It’ll automatically work when you drop the ice cream onto the fridge.
  6. Click Done Editing States.
  7. You’re done! Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your drag-and-drop interaction works.

If you don’t need to score your drag-and-drop interaction as an assessment, using triggers as we’ve done here is an easy way to create an interaction. If you do need to grade your drag-and-drop interaction, it’s best to use the convert-to-freeform method described below, which automatically adds quizzing elements, such as feedback, number of attempts, and score.

Practice Activity: Convert an Existing Slide to a Freeform Drag-and-Drop Interaction

If you need to grade your drag-and-drop interaction as part of a quiz, use this convert-to-freeform method to create it. It’ll automatically add quizzing elements, such as feedback, number of attempts, and score.

Watch this introduction to see the type of interaction we’re going to build.

First, we need to convert an existing slide to a freeform interaction and identify which objects are draggable and which are drop targets. Watch this demo, then follow the steps below to practice.

  1. Open the Storyline folder in your practice files, then open the 03F_drag_drop_interactions_360.story file and go to the last slide in the project.

    There are duplicate slides in the sample project. The first two slides are demos so you can preview the finished examples. We’ll use the last two slides to create drag-and-drop interactions in this tutorial.
  2. To convert this slide to drag-and-drop interaction, go to the Insert tab on the ribbon and click Convert to Freeform.
  3. Select Drag and Drop and click OK. Storyline automatically adds quizzing elements to the slide and switches you to Form View where you'll identify which items are draggable and which function as drop targets.

Next, identify the drag items for your interaction. In this example, there are four draggable items.

  1. Click the first cell in the Drag Item column of the grid. A list of all the objects on the slide will appear, and as you scroll over the objects in the list, they’ll be outlined in red in the preview area on the right side of the screen. Click the flashlight object to select it.
  2. Click the each of the next three cells in the Drag Item column and select the hotdogs, radio, and water.

Now we need to select a drop target for each drag item we’ve identified. In this example, there’s only one possible drop target—the cardboard box.

  1. Click the first cell in the Drop Target column to see a list of the remaining objects on the slide. Click the cardboard box. You've just matched the flashlight drag item to the hotspot drop target. In other words, if the learner drops the flashlight anywhere else on the slide, they'll get it wrong.
  2. Assign the cardboard box drop target to the radio and water drag items as well.
  3. Leave the drop target blank for the hotdogs. This means the hotdogs will function as a decoy drag item since they aren’t part of the correct answer. You’ll be able to drag the hotdogs and even drop them into the box, but if you do, you’ll get the question wrong.

Sometimes, you may want to change the drag-and-drop behavior for an interaction you’re building. In this example, let’s change how the drag items stack inside the drop target. Watch this video demo, then follow the steps below to practice.

If you’re following along, you should have the 03F_drag_drop_interactions_360.story practice file open to the last slide, and you should be in Form View.

  1. Go to the Question tab on the ribbon and click Drag & Drop Options.
  2. When the Drag & Drop Options window appears, choose Tile from the Snap dropped items to drop target selector and click OK.

In order for the drag items to tile properly in the drop target (i.e., the cardboard box), we need to add a hotspot that represents just the inside of the box.

  1. Switch to Slide View, then go to the Insert tab on the ribbon, click Hotspost, and choose the rectangle hotspot.
  2. Draw a rectangle hotspot around the inside of the cardboard box on the slide.
  3. Delete the trigger that Storyline automatically adds for the new hotspot.
  4. Then use the timeline to rename the hotspot. Call it Drop Target.
  5. Now switch back to Form View and change all the drop targets to the Drop Target hotspot you just added.

You can also customize the quizzing elements for your interaction. In this example, let’s shuffle the drag items and give learners two attempts to solve the interaction. Watch this demo, then follow the practice steps below.

  1. In Form View, go to the Question tab on the ribbon and use the Shuffle drop-down list to select Answers.
  2. Use the Attempts drop-down list to select 2.

Finally, you can tweak the behavior of your drag items and drop targets. Let’s force drag items to return to their original positions if they’re dropped outside a legitimate target.

  1. In Form View, go to the Question tab on the ribbon and click Drag & Drop Options.
  2. Mark the box to Return item to start point if dropped outside, then select a correct drop target from the corresponding drop-down list.
  3. Click OK to close the Drag & Drop Options window.

You’re interaction is complete. Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your drag-and-drop interaction works.

Summary

In this tutorial, you learned two ways to build compelling drag-and-drop interactions in Storyline. To learn more, see these user guides:

In the next tutorial, you’ll learn how to use variables in Storyline 360 and Storyline 3.