How to Use Hotspots in Drag and Drop Interactions

hotspot drag drop interactions

In an earlier post, we looked at three ways to use hotspots in your e-learning courses. In most cases, hotspots are used as invisible buttons for interactive e-learning. But today we’ll look at ways to use the hotspot feature in your drag and drop interactions where the hotspot isn’t a button.

Drag and Drop Basics

Generally, there are two main components to drag and drop interactions:

  • an object that is dragged
  • a target to accept the dragged object

I covered this in more detail when we looked at how to create drag and drop interactions.

Use the Hotspot as a Catch-all Target

Usually, there’s an obvious correct or incorrect target for drag and drop interactions. But what happens when the object is dropped outside of one of the target choices? In most cases, the object gets kicked back to the starting point as in the image below.

Dropped object snaps back to starting point when dropped outside of the target.

drag and drop

In the above example, the dragged object can only be dropped on one of the targets. If it’s dropped outside of the target, it bounces back to the starting point. This is usually the default setting and most common in drag and drop interactions.

Dropped object triggers an “oops” layer when dropped outside of the target on the catch-all hotspot.

However, the hotspot feature can serve as a catch-all target to provide feedback when objects are dragged and dropped outside of the desired target. When an object is dropped on the catch-all target it triggers the appropriate feedback. In the example below, the catch-all target triggers an “oops, try again” layer.


If you create a catch-all hotspot there are two things to do:

  • Put the hotspot underneath all of the other targets. Otherwise, it covers the drop targets and the interaction won’t work.
  • Determine how the dropped object responds. By default the object snaps to the center of the target; and since the target covers the entire screen, it looked weird sitting on top of the guy who’s in the center of the screen. In the example above I let it remain where it was dropped.

drag and drop interaction

Use the Hotspot to Expand and Control the Drop Target

Another great use of the hotspot feature is to better manage the drop target area. Since the hotspot is transparent it can sit on top of other object and be sort of a surrogate drop target. Instead of dropping on what looks like the target, they’re actually dropping on the target hotspot.

By doing this, you can determine where the dropped object is displayed. Here are before and after examples.

Dropped objects align based on the target image and display outside of the box.

drag and drop interaction target free

The objects are dragged to the box. By making the box image the drop target and tiling the objects, you can see that the objects actually align at the top of the box image.

Dropped objects align based on the hotspot target and align inside of the box.

drag and drop interaction drop target hotspot

In the example above, the box image isn’t the drop target. Instead, there’s a hotspot placed on top of the box image and centered over the opened box. This allows control of the alignment of the dropped objects to create the desired visual effect.

drag and drop interaction hotspot target

The hotspot is a great feature for creating interactive content. Most of the times it’s used as an invisible button. However, because it’s an easy-to-see green box (for production) and invisible to the end user, it’s a great feature to create large, catch-all targets. And it also works well for controlling how the dropped objects align and display.

Download the fully revised, free 63-page ebook: The Insider’s Guide to Becoming a Rapid E-Learning Pro

Vote for Articulate 360

  • Articulate 360 is a 2017 People’s Choice Stevie Award nominee for Best New Product in the “Software – Learning/Workforce Dev” category. We’d really appreciate your vote. Click here to cast your vote. It’s as simple as that! Thanks.

Upcoming E-Learning Events

  • May 22-24 (Atlanta). ATD International Conference & Expo. We’ll be in booth 738.
  • June 20-21 (San Diego). FocusOn Learning conference.
  • Articulate Roadshows. Join us for one or two days of e-learning goodness. Day 1 focuses on more general type e-learning topics and Day 2 is centered on learning to build some nice, reusable interactions. Learn more and sign up using the links below. Seats are limited for the events. If you’re interested in presenting at one of the roadshows, let me know.
  • There are a couple of other events planned. Once we get all of the bookings confirmed, we’ll add the registration page and info.


Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out
and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Go to Source

Powered by WPeMatico