Glisser-déposer

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

Cette fonctionnalité est particulièrement utile pour créer des activités éducatives, des jeux interactifs (puzzles, quizz…) ou encore des interfaces utilisateur dynamiques. Le composant offre des options flexibles pour définir des objets glissables, des zones de dépôt et des comportements interactifs qui se déclenchent lorsque des objets sont déplacés ou déposés.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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 avec la base de données PandaSuite. 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.

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 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.

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
• Créer un puzzle

Tutoriels vidéo

Templates