The Rapid Elearning Blog

drag and drop interactions

After last week’s post on the different drag & drop interaction examples, I had quite a few emails asking for tips on how to create drag and drop interactions for elearning. So now’s a good time to review some good general tips for building drag and drop interactions.

Why Are You Dragging?

There are a few reasons why we make onscreen objects draggable.

Drag and Drop Interactions Tips

  • Where is the user supposed to drag and drop the object? In most cases, drag and drop interactions require a drop target. Drop targets can be an actual object, or it may be an invisible element (like a hotspot) that controls where the dropped objects lands.
  • Do you want the object to snap to the drop target? There are different ways to work with the drop target. Sometimes, things may not be quite as evident onscreen, snapping to the target helps when the user gets the object over the target.

drag and drop interactions snap to target

  • Do you want to make the target visible? This makes sense if there are a number of drag and drop options and you have a very clear target for each draggable object.

drag and drop interactions ghost image

  • What happens when the user drags an object out of position? I like to add a ghost image or something to show where the drag object originally came from. It’s also an easy way to indicate progress.

drag and drop interactions ghost image

  • Are the instructions clear? Sometimes developers forget to put instructions for the interaction and what the user is to do. If you expect them to interact with the screen in a new way, you should include clear instructions. I like to use gate screens that stop the user and provides instructions.

Drag and Drop Interactions: Providing Feedback for Correct and Incorrect Actions

There are a few way to provide feedback when the user drops the object on a target.

  • The easiest way is to allow the target to accept the object. Using a snap feature essentially pulls the dragged item to the target. That lets the user know that they’ve dropped the object on a target. And depending on how you structure the drag and drop interactions, it can also be the means to show feedback for a correct action.
  • Another way to provide feedback to the user is to reject incorrect choices and cause the dropped object to return to the starting position.

drag and drop interactions bounce feedback

  • You can also provide immediate correct and incorrect feedback by changing the state of the object to reflect when it’s a right or wrong decision.

drag and drop interactions provide feedback

Here are some previous posts that cover drag and drop interactions in a bit more detail:

Drag and drop interactions can help make course more engaging and interactive. Too often we limit ourselves to standard click-based interactions and decision-making. Next time, try to convert one of those to a drag and drop and see how it goes. What tips do you have for those creating drag and drop interactions? Share them in the comments section.


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 e-learning, instructional design, and training jobs

Participate in the weekly e-learning challenges to sharpen your skills

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

Lots of cool e-learning examples to check out and find inspiration.

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

2 responses to “How to Create Drag & Drop Interactions”

July 13th, 2016

This is a very nice blog.

July 18th, 2016

I want to fallow your blog.