# Comment créer des activités de glisser-déposer

> Avec le glisserdéposer vous pouvez créer des activités pour  associer classer ou apparier des éléments  en les faisant glisser vers la zone cible appropriée

Source: https://help.genially.com/fr/comment-creer-des-activites-de-glisser-deposer-SJIMkHnmbx

Last updated: 2026-04-20T11:53:11.437Z

Avec le glisser-déposer, vous pouvez créer des activités pour **associer, classer ou apparier des éléments** en les faisant glisser vers la zone cible appropriée.

Imaginez vos apprenant·e·s plaçant chaque mot dans la bonne catégorie ou vos client·e·s positionnant la clé dans la bonne serrure pour débloquer un défi. Cette activité offre des milliers de possibilités créatives !

Suivez ce tutoriel si vous souhaitez créer une dynamique puissante qui active l’apprentissage visuel, moteur et cognitif en même temps.

  

## **Fonctionnalités principales**

1.  **Les éléments glissables** sont les véritables protagonistes de l’activité. **EIles peuven****t** être des textes, des images et des GIF, des formes et des silhouettes, des icônes, des illustrations, des personnages, des boutons et des stickers. À noter que, même si un élément est verrouillé dans l’éditeur, vous pouvez le sélectionner comme élément glissable. En plus du glisser-déposer, vous pouvez déplacer les éléments à l’aide de la navigation au clavier ou en cliquant dessus, puis en cliquant sur la zone de destination.
2.  **Les zones de destination** sont les zones dans lesquelles les éléments glissables doivent être déposés. **Elles peuvent** être des images et des GIF, des formes et des silhouettes, des icônes, des illustrations, des personnages, mais aussi des zones invisibles, des textes, des boutons et des stickers. La taille de la zone dépendra de l’élément que vous choisissez comme destination.

  

Chaque élément glissable **peut avoir une ou plusieurs zones de destination**, et une même zone peut recevoir **plusieurs éléments glissables différents**.

*   Si un élément est déposé sur **la bonne zone**, la connexion est établie et un petit effet d’animation se déclenche pour renforcer le sentiment de réussite.
    
*   Si un élément est déposé sur **la mauvaise zone**, un petit effet apparaît et l’élément revient à sa position initiale.
    

Vous pouvez configurer ce qui se passe **lorsque chaque connexion est correcte, en cas d’erreur ou lorsque l’activité est terminée** : ouvrir une fenêtre, lire un audio, passer à une autre page, ouvrir un lien, déclencher un effet, afficher et/ou masquer des éléments ou faire défiler jusqu’à un élément (uniquement pour les créations au format mobile). [Combinez ces actions](https://help.genially.com/en_us/how-to-combine-several-interactions-in-genially-H1uc9Dr2j) selon vos besoins.

  

## **Comment créer une activité de glisser-déposer**

1.  **Concevez votre activité**
    

Créez la scène ou la composition visuelle de l’activité en plaçant chaque élément glissable à son point de départ. Ajoutez également les zones de destination.

2.  **Utilisez l’interactivité Glisser-déposer**

Cliquez sur l’élément que vous souhaitez rendre glissable, cliquez sur le bouton _Interactivité_ et sélectionnez _Glisser-déposer_. C’est fait : votre premier élément glissable est configuré.

3.  **Définissez les connexions une par une**
    

Cliquez maintenant sur le deuxième carré et sélectionnez sa zone de destination afin de finaliser la première connexion.

Répétez ce processus pour autant d’éléments glissables que nécessaire (un élément glissable → une zone de destination). Il n’y a aucune limite.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/5adc7ebe6992e84c6103a65b05805a25.gif)

  

4\. **Personnalisez les actions**

Décidez de ce qui doit se passer dans chaque cas :

1.  **Lorsque chaque connexion est correcte.** Par exemple, vous pouvez lire un audio de réussite à chaque bonne connexion et/ou afficher une fenêtre. C’est particulièrement utile si vous souhaitez fournir un feedback personnalisé pour chaque élément glissable.
    
2.  **En cas d’erreur.** Par exemple, vous pouvez afficher une fenêtre avec un message générique ou lire un audio d’erreur à chaque mauvaise connexion.
    
3.  **Lorsque l’activité est terminée.** Par exemple, vous pouvez célébrer cela avec un effet confettis et déverrouiller l’écran suivant.
    

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/3c007962373eab0d922fffb23f4d8814.gif)

  

5\. **Choisissez quand valider**

Préférez-vous vérifier toutes les connexions en une seule fois ou au fur et à mesure ? Vous pouvez activer le **bouton de validation** pour confirmer que les éléments ont été placés dans la bonne zone uniquement une fois qu’ils sont tous positionnés. Choisissez la couleur du bouton selon vos préférences.

Astuce : si vous préférez valider les connexions une par une sans utiliser le bouton, vous pouvez créer des éléments glissables qui ne sont associés à aucune zone de destination. En les déplaçant, vous obtiendrez un retour d’erreur.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/4f7a31835a93445ab2169933f82e4c41.gif)

  

C’est prêt ? Prévisualisez pour voir comment fonctionne votre activité de glisser-déposer.

  

### Accessibilité

Le glisser-déposer est compatible avec les lecteurs d’écran et la navigation au clavier. Cela signifie que toute personne, quelles que soient ses capacités, peut réaliser ce type d’activités dans Genially.

  

## **Idées et conseils pour en tirer le meilleur parti**

À la lecture de ce tutoriel, plusieurs idées vous sont sans doute déjà venues à l’esprit. Dans le doute, voici quelques exemples inspirants.

  

Vous souhaitez commencer par quelque chose de simple ? Alors suivez ces conseils :

1.  **Niveau facile :** utilisez peu d’éléments glissables dans votre activité de glisser-déposer. Vous pouvez également utiliser des couleurs ou des ombres discrètes pour donner des indices sur l’emplacement des zones de destination.
    
2.  **Niveau ultra facile :** indiquez quels éléments sont glissables. Activez ces indices visuels depuis le menu principal **☰** (en haut à gauche), cliquez sur _Préférences_, puis activez _Indiquer si l’élément peut être déplacé_.
