# How to Create Drag-and-Drop Activities > With drag and drop you can create activities to match classify or pair elements by dragging them to the correct target area Imagine your students plac Source: https://help.genially.com/en_us/how-to-create-drag-and-drop-activities-SJIMkHnmbx Last updated: 2026-04-20T11:51:25.377Z With drag and drop, you can create activities to **match, classify, or pair elements** by dragging them to the correct target area. Imagine your students placing each word into the right category, or your clients positioning the key in the correct lock to unlock a challenge. This activity has endless creative possibilities! Follow this tutorial if you want to create a powerful dynamic that activates visual, motor, and cognitive learning all at the same time. ## Key features 1. **Draggable elements** are the main characters of the game. **They can be** text, images and GIFs, shapes and silhouettes, icons, illustrations, characters, buttons, and stickers. Keep in mind that even if an element is locked in the editor, you can still select it as draggable. In addition to dragging, you can move elements using keyboard navigation or by clicking on them and then clicking on the target area. 2. **Target areas** are the zones where draggable elements must be dropped. **They can be** images and GIFs, shapes and silhouettes, icons, illustrations, characters, as well as invisible areas, text, buttons, and stickers. The size of the area will depend on the element you choose as the target. Each draggable element **can have one or multiple target areas**, and the same target area can receive **several different draggable elements.** * If an element is dropped on **the correct area**, the connection is established and a small animation effect is triggered to reinforce the sense of achievement. * If an element is dropped on **the wrong area**, a small effect appears and the element returns to its initial position. You can configure what happens **when each connection is correct, when there’s a mistake, or when the activity is completed**: open a window, play audio, jump to another page, open a link, trigger an effect, show and/or hide elements, or scroll to an element (only in mobile-format creations). [Combine these actions](https://help.genially.com/en_us/how-to-combine-several-interactions-in-genially-H1uc9Dr2j) however you like. ## **How to create a drag-and-drop activity** Follow these steps: 1. **Design your activity** Create the scene or visual layout of the activity, placing each draggable element in its starting position. Also include the target areas. 2. **Use the Drag-and-Drop interactivity** Click on the element you want to make draggable, click the _Interactivity_ button, and select _Drag and drop_. Done! Your first draggable element is now set up. 3. **Set up the connections one by one** Now simply click the second square and select its target area to complete the first connection. Repeat this process for as many draggable elements as you have (one draggable element → one target area). There’s no limit. ![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/5adc7ebe6992e84c6103a65b05805a25.gif) 4\. **Customize the actions** Decide what should happen in each case: 1. **When each connection is correct.** For example, you can play a success audio every time a connection is completed correctly and/or show a window. This is useful if you want to give personalized feedback for each draggable element. 2. **When there’s a mistake.** For example, you can show a window with a generic message or play an error audio every time a connection is incorrect. 3. **When the activity is completed.** For example, you can celebrate with a confetti effect and unlock the next screen. ![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/3c007962373eab0d922fffb23f4d8814.gif) 5**. Choose when to validate** Do you prefer to check all connections at once or as you go? You can enable the **validation button** to confirm whether elements have been placed in the correct target area only after all of them are positioned. Choose the button color based on your preferences. Pro tip: If you’d rather validate connections one by one without using the button, you can create draggable elements that aren’t linked to any target area. When you drag them, you’ll get error feedback. ![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/04b49a50de01892bc6ff23c6fbdce267.gif) All set? Preview your creation to see how your drag-and-drop activity works. ### About accessibility Drag and drop is compatible with screen readers and keyboard navigation. This means anyone—regardless of their abilities—can complete these activities in Genially. ## **Ideas and tips to get the most out of it** After reading this tutorial, you’ve probably already come up with a few ideas. Just in case, here are some inspiring examples. Want to start with something simple? Then follow these tips: 1. **Easy level:** use only a few draggable elements in your drag-and-drop activity. You can also use colors or subtle shadows to give hints about where the target areas are. 2. **Ultra-easy level:** indicate which elements are draggable. Enable these visual hints from the main menu **☰** (top left), click _Preferences_, and then activate _Indicate if it can be dragged_.