Le composant Drag & Drop (glisser-déposer)

Le composant Drag & Drop permet de créer des interactions dynamiques où l’utilisateur peut glisser un élément à un endroit précis. 

Cette fonctionnalité est particulièrement utile pour créer des activités éducatives, des jeux interactifs (puzzles, quizz...) ou encore des interfaces utilisateur dynamiques.

Cas d'utilisation

• Education : réalisez des exercices interactifs, comme associer des images à des mots ou classer des éléments par catégorie.
• Gamification : Créez des jeux basés sur des puzzles ou des défis où l’utilisateur doit glisser et déposer des objets au bon endroit.

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 le Drag & Drop.

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 dans la liste pour rendre l'objet glissable. Pour information, un même objet peut être à la fois glissable et une zone de dépôt. 

Vous avez plusieurs autres propriétés : 

• Au-dessus des objets : l'objet se place au-dessus des autres objets lors de son déplacement
• Verrouiller après dépôt : une fois déposé, l'objet ne peut plus être déplacé
• 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

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.

Choisissez si vous souhaitez une limite dans le nombre d'objets glissables qui peuvent s'y déposer. Cliquez sur  + Ajouter pour sélectionner le ou les objets glissables acceptés sur cette zone. Une couleur orange indique visuellement l'objet glissable que vous avez choisi.

Actions interactives

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

Vous pouvez déclencher une action lors du déplacement ou du retour à sa position initiale de l'objet glissable . 

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

• Glisse : quand l'utilisateur a placé son doigt sur votre objet glissable et qu’il commence son déplacement
• Retour : quand l'utilisateur relâche la pression sur votre objet glissable et que ce dernier est renvoyé à son emplacement initial (aucune association avec une zone de dépôt) 

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

Pour créer une actions liée au dépôt, sélectionnez votre zone de dépôt.

Choisissez parmi les déclencheurs :

• Dépose {nom_glissable} : quand votre utilisateur relâche la pression sur votre objet glissable et que ce dernier est bien positionné sur la zone de dépôt (association réussie)
• Entre {nom_glissable} : quand votre utilisateur atteint la zone de dépôt avec son objet glissable
• Sort {nom_glissable} : quand votre utilisateur quitte la zone de dépôt avec son objet glissable

Enlever les glissables

Vous pouvez créer une action pour remettre automatiquement les objets glissables à leur place.

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

Vous avez le choix entre Enlever tous les glissables ou Enlever un glissable.

Logique et conditions

Dans le cadre d’un puzzle ou d’une activité où il est nécessaire de vérifier si les pièces ont été placées au bon endroit, il est important d’ajouter une logique de validation. Le composant Condition est une solution simple et efficace pour vérifier si chaque pièce a été déposée dans la bonne zone. 

Voici comment procéder :

• Ajoutez un composant Condition
• Définissez la condition "Toutes les pièces ont bien été déposées" en s'appuyant sur chaque zone de dépôt
• Chaque zone de dépôt doit contenir la bonne pièce
• Associez une action, comme l’affichage d’un message ou une animation, lorsque toutes les pièces sont correctement placées.

Si vous souhaitez suivre le progrès global (par exemple, combien de pièces ont été correctement placées), vous pouvez utiliser des variables avec la base de données PandaSuite. Cependant, cette méthode nécessite de gérer les cas où l’utilisateur déplace à nouveau les pièces.

Bonnes pratiques et astuces

Grande liste d'objets glissades

Si vous avez une grande liste d'objets glissables sur un même écran, utilisez un composant Multi-état et une présentation sous la forme de tabs/panels en plaçant les objets glissables et la zone de dépôt sont créés au sein de ce composant. 

Chaque état correspond à un panel/une tab, et l'utilisateur passe d'état en état pour parcourir la liste et faire le choix de son objet glissable. 

Exemples

• Créer un jeu en glisser-déposer
• Créer un puzzle