H5P Drag and Drop

About Drag and Drop 

The Drag and drop content type allows learners to drag a piece of text or an image and drop it on one or more corresponding dropzones - dropzones can be an image or any other background.  

Drag and drop enables the learner to associate two or more elements and to make logical connections visually. Drag and drop can be used on its own as a knowledge check or it can be included in Question SetsInteractive Videos, or Course Presentations

Use Cases

Drag and drop can be used to:

  • Group elements that belong together or have something in common 
  • Match an object with another object or a label
  • Put objects in the correct order 
  • Place objects in a correct position
  • Label specific locations of an image


Create Drag and Drop H5P interactive content

Creating new H5P content is a multi-step process. H5P activities are managed through a Content Bank an area where H5P content may be created, edited and stored. Once an activity has been created in the content bank, it can be added to your course and the activity settings can be configured as needed. 

  1. Open the CLE (cle.ucsf.edu) 
  2. Go to the CLE course where you would like to add the activity and turn Edit mode on. 
  3. Navigate to the content bank in your course to create interactive content and visit the H5P drag and drop tutorial to learn how drag and drop works.    
  4. Once your activity has been created, navigate to the section where the activity should be located. 
  5. Click add an activity or resource to add an H5P activity to your course. 

Tip: The CLE also allows you to combine H5P content into other activities/resources such as a Page, Lesson, or Book. Check Embed H5P into other activities in the CLE to combine multiple H5P content objects.

Was this topic helpful?
0 out of 0 found this helpful

Have more questions? Contact us