# Glisser-déposer

> Découvrez comment le composant Drag & Drop permet de créer des interactions dynamiques, telles que des activités éducatives, des jeux interactifs et des interfaces utilisateur dynamiques.

https://docs.pandasuite.com/fr/essentials/components/drag-and-drop/

**Le composant Drag & Drop permet de créer des interactions où les utilisateurs glissent des éléments vers des emplacements spécifiques.**

[Vidéo : sur une tablette, deux pièces d'un puzzle de train sont glissées l'une après l'autre dans le cadre vide et s'y emboîtent]

## Cas d'utilisation

- **Éducation** : réalisez des exercices interactifs, comme associer des images à des mots, classer des éléments par catégorie ou compléter des diagrammes.
- **Gamification** : créez des jeux de puzzle, des défis de tri ou des quiz interactifs où l'utilisateur doit glisser et déposer des objets au bon endroit.
- **Formulaires interactifs** : construisez des formulaires dynamiques où les utilisateurs peuvent réorganiser des éléments, prioriser des items ou créer des mises en page personnalisées.
- **Visualisation de données** : créez des graphiques ou des diagrammes interactifs où les utilisateurs peuvent manipuler des éléments pour explorer des relations.

## Mise en place du composant

Pour créer une action de drag & drop, vous avez besoin d'un objet qui se déplace (le glissable) et d'un conteneur (la zone de dépôt). Avec le composant Drag & Drop, vous pouvez créer votre glissable, définir une zone de dépôt et créer des actions liées au drag & drop.

### Créer l'objet glissable

Dans la fenêtre **Composants**, cliquez sur **Drag & Drop**.

> **Info**
>
> Vous pouvez également utiliser l'option **Convertir en Drag & Drop**
> disponible via le menu de l'application (**Mise en page** > **Convertir en
> Drag & Drop**) pour transformer un groupe d'éléments existants en un composant
> **Drag & Drop**.

Double-cliquez sur le composant pour insérer à l'intérieur l'objet qui sera glissable (par exemple une image).

Dans les propriétés, cochez l'option **Déplacement** pour rendre l'objet glissable.

> **Info**
>
> Un même objet peut être à la fois glissable et une zone de dépôt, ce qui
> permet de créer des chaînes complexes de glisser-déposer où les objets peuvent
> être déplacés entre plusieurs emplacements.

[Image : Pièce Sunflower d'un jeu soleil ou ombre sélectionnée dans PandaSuite Studio : l'option de déplacement est sur Oui dans ses propriétés]

**Propriétés des objets glissables :**

- **Au-dessus des objets :** l'objet glissable se place au-dessus des autres objets lors de son déplacement, garantissant qu'il reste visible pendant le glissement.
- **Verrouiller après dépôt :** une fois déposé dans une zone de dépôt valide, l'objet ne peut plus être déplacé. Utile pour les jeux de puzzle ou les formulaires où les positions doivent être définitives.
- **Ignorer les états après dépôt :** cette option permet de gérer l'affichage d'une grande liste d'objets glissables au sein d'un composant multi-état. Lorsqu'elle est activée, l'objet glissable reste dans sa position de dépôt même lorsque le composant multi-état change d'état.

### Définir la zone de dépôt

Ajoutez un autre composant **Drag & Drop**. Ce composant peut être vide et placé au-dessus d'un élément graphique qui symbolise l'emplacement.

Dans les propriétés, cochez la case **Zone de dépôt**.

[Image : Massif Sunny bed sélectionné : Zone de dépôt sur Oui, sans limite, avec Sunflower et Lavender comme glissables associés]

**Configuration de la zone de dépôt :**

- **Limite de glissables :** activez cette option pour restreindre le nombre d'objets glissables qui peuvent être déposés dans cette zone.
- **Nombre de glissables maximum :** spécifiez le nombre maximum d'objets qui peuvent être placés dans cette zone. Ce champ n'est disponible que lorsque « Limite de glissables » est activé.
- **Glissables associés :** cliquez sur **+ Ajouter** pour sélectionner quels objets glissables sont acceptés dans cette zone. Une couleur orange indique visuellement l'objet glissable sélectionné. Seuls les glissables spécifiés peuvent être déposés avec succès dans cette zone.

> **Astuce**
>
> Créez plusieurs zones de dépôt avec différents glissables acceptés pour
> construire des jeux de tri ou des exercices de catégorisation. Par exemple,
> créez des zones pour « Animaux », « Plantes » et « Objets », chacune acceptant
> uniquement les glissables appropriés.

## Actions interactives

### Déclencher une action liée au déplacement

Vous pouvez déclencher des actions pendant le processus de glissement ou lorsque l'objet retourne à sa position initiale.

Sélectionnez votre objet glissable et ajoutez une action. Choisissez parmi les déclencheurs :

- **Glisse :** se déclenche quand l'utilisateur place son doigt ou son curseur sur l'objet glissable et commence à le déplacer. Utilisez-le pour fournir un retour visuel, jouer des sons ou mettre à jour des éléments d'interface pendant le glissement.
- **Retour :** se déclenche quand l'utilisateur relâche l'objet glissable en dehors de toute zone de dépôt valide, le faisant retourner à sa position initiale. Utile pour fournir un retour sur les dépôts invalides ou suivre les tentatives échouées.

[Image : Déclencheurs de la pièce Sunflower : Glisse et Retour sont encadrés en tête de liste, avant les clics et les swipes]

### Déclencher une action après dépôt

Pour créer des actions liées aux interactions avec la zone de dépôt, sélectionnez votre zone de dépôt.

Choisissez parmi les déclencheurs :

- **Dépose {nom\_glissable} :** se déclenche quand l'utilisateur relâche l'objet glissable et qu'il est placé avec succès dans la zone de dépôt. C'est le déclencheur le plus courant pour la validation, le calcul du score ou le passage à l'étape suivante.
- **Entre {nom\_glissable} :** se déclenche quand l'utilisateur déplace l'objet glissable dans la zone de dépôt (tout en le maintenant). Utilisez-le pour mettre en surbrillance la zone de dépôt ou fournir un retour visuel sur le placement valide.
- **Sort {nom\_glissable} :** se déclenche quand l'utilisateur déplace l'objet glissable hors de la zone de dépôt (tout en le maintenant). Utilisez-le pour supprimer les surbrillances ou réinitialiser le retour visuel.

> **Info**
>
> Si votre zone de dépôt accepte plusieurs objets glissables, ces trois
> déclencheurs seront disponibles pour chaque glissable accepté. Cela vous
> permet de créer différentes réponses selon l'objet déposé.

### Enlever les glissables

Vous pouvez créer une action pour remettre automatiquement les objets glissables à leur position d'origine. Cela est utile pour les boutons « Réinitialiser » ou « Réessayer » dans les jeux et exercices.

Sélectionnez un déclencheur (par exemple un bouton) et choisissez l'action **Agir sur un composant** > **Drag & Drop {zone de dépôt}**.

Vous avez deux options :

- **Enlever tous les glissables :** enlève tous les objets actuellement dans la zone de dépôt et les retourne à leurs positions d'origine.
- **Enlever glissable :** enlève un objet glissable spécifique de la zone de dépôt et le retourne à sa position d'origine.

[Image : Bouton Try again : au clic, Agir sur un composant sur Sunny bed propose Enlever tous les glissables et Enlever glissable]

## Propriétés exposées

Le composant Drag & Drop expose les données suivantes qui peuvent être liées à d'autres composants :

**Pour les zones de dépôt :**

- **Glissable(s) déposé(s)** : la liste des objets glissables actuellement placés dans la zone de dépôt. Cette propriété peut être utilisée pour lier des données à d'autres composants et créer des interfaces dynamiques qui réagissent aux interactions de glisser-déposer, telles que des indicateurs de progression, des compteurs ou des retours visuels basés sur l'état des zones de dépôt.

## Logique et conditions

Dans les puzzles ou activités où vous devez vérifier si les pièces ont été placées au bon endroit, ajouter une logique de validation est essentiel. [Le composant Condition](https://docs.pandasuite.com/fr/essentials/components/condition/) offre une solution simple et efficace pour vérifier si chaque pièce a été déposée dans la bonne zone.

**Mise en place de la validation :**

- Ajoutez un composant **Condition** à votre écran.
- Définissez la condition « Toutes les pièces ont été correctement placées » en vérifiant chaque zone de dépôt.
- Pour chaque zone de dépôt, vérifiez qu'elle contient l'objet glissable correct.
- Associez une action lorsque la condition est remplie, comme l'affichage d'un message de réussite, la lecture d'une animation de célébration ou le passage à l'écran suivant.

[Image : Fenêtre Condition All dropped? : Draggable(s) dropped de Drop01 contient Piece01, ET le même test sur Drop02 ; nom et expressions encadrés]

**Suivi de la progression :**

Si vous souhaitez suivre la progression globale (par exemple, combien de pièces ont été correctement placées sur le total), vous pouvez [utiliser des variables](https://docs.pandasuite.com/fr/essentials/data/variables/) et les stocker dans le [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/). Cette méthode nécessite de gérer les cas où les utilisateurs déplacent à nouveau des pièces depuis les zones de dépôt.

> **Astuce**
>
> Pour les systèmes de score, incrémentez une variable à chaque dépôt correct,
> et décrémentez-la lorsqu'une pièce est enlevée d'une zone de dépôt correcte.
> Cela vous donne un suivi de progression en temps réel.

## Bonnes pratiques et astuces

### Grande liste d'objets glissables

Si vous avez une grande liste d'objets glissables sur un même écran, utilisez un [composant Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/) organisé sous forme de tabs ou de panels. Placez les objets glissables et les zones de dépôt dans ce composant, chaque état correspondant à un panel différent.

Cette approche :

- Réduit l'encombrement visuel et améliore les performances.
- Permet aux utilisateurs de naviguer entre les catégories de glissables.
- Fonctionne bien avec la propriété **Ignorer les états après dépôt** pour garder les objets déposés visibles lors des changements d'état.

### Retour visuel

Fournissez un retour visuel clair tout au long de l'interaction de glisser-déposer :

- **Pendant le glissement :** utilisez le déclencheur **Glisse** pour agrandir, faire pivoter ou ajouter une ombre à l'objet glissable.
- **À l'entrée :** utilisez le déclencheur **Entre** pour mettre en surbrillance ou agrandir la zone de dépôt quand un objet valide s'approche.
- **En cas de succès :** utilisez le déclencheur **Dépose** pour jouer un son, afficher une animation ou changer l'apparence de l'objet glissable et de la zone de dépôt.
- **En cas d'échec :** utilisez le déclencheur **Retour** pour secouer l'objet ou jouer un son d'erreur quand il est déposé dans un emplacement invalide.

Ces changements d'apparence reposent sur un Multi-état : un Drag & Drop n'a pas d'états propres, ajoutez donc un Multi-état à l'intérieur de l'objet glissable ou de la zone de dépôt, puis dirigez ces déclencheurs vers lui (**Agir sur un composant** > votre Multi-état). Lorsqu'un même élément doit combiner plusieurs aspects indépendants, gardez chaque aspect dans son propre Multi-état pour qu'ils ne se réinitialisent pas entre eux : voir [Gardez les comportements indépendants sur des Multi-états distincts](https://docs.pandasuite.com/fr/essentials/components/multi-state/#gardez-les-comportements-indépendants-sur-des-multi-états-distincts).

### Considérations d'accessibilité

- Assurez-vous que les objets glissables et les zones de dépôt ont une taille suffisante pour l'interaction tactile (minimum 44x44 pixels recommandé).
- Fournissez des indicateurs visuels montrant quels objets sont glissables et où ils peuvent être déposés.
- Envisagez d'ajouter des méthodes d'interaction alternatives (ex. : appui pour sélectionner, appui pour placer) pour les utilisateurs qui peuvent avoir des difficultés avec les gestes de glissement.

## Ressources complémentaires

### Articles

- [Créer un jeu en glisser-déposer](https://docs.pandasuite.com/fr/essentials/gamification/create-drag-and-drop-game/)
- [Créer un puzzle](https://docs.pandasuite.com/fr/essentials/gamification/puzzle/)

### Tutoriels vidéo

[Vidéo : Créer un jeu en glisser-déposer avec animations](https://youtu.be/jL3jgLhMVHo)

[Vidéo : Créer un jeu en glisser-déposer avec conditions](https://youtu.be/59-FeCQCkak)

### Templates

[Modèle : Puzzle avec pop-up](https://pandasuite.com/dashboard/use-template/qxEHQosB5IBMJWwgC_MX?confirm)

[Modèle : Créer un jeu en glisser-déposer avec conditions](https://pandasuite.com/dashboard/use-template/PLt5Y5cBsQqwU5apjRN5)