Le composant Drag & Drop (glisser-déposer)
Le drag & drop permet de glisser (avec le doigt ou la souris) un objet vers un conteneur en le maintenant sélectionné. C'est une fonctionnalité classique des interfaces, et elle est très utilisée pour les jeux (puzzle, remet dans le bon ordre...) ou pour les simulateurs.
Pour créer un 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.
Dans cet article
Créer un objet glissable
Dans la fenêtre Composants, cliquez sur le 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. Un objet peut être glissable et une zone de dépôt.
Vous avez plusieurs options :
- 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
Astuce : Pour afficher 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 : 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.
Créer une zone de dépôt
Ajoutez un autre composant Drag & Drop. Ce composant peut être vide.
Dans les propriétés, cochez la case Zone de dépôt.
Choisissez le ou les objets glissables qui peuvent se déposer ici. Cliquez sur + Ajouter et sélectionnez les objets glissables acceptés. Une couleur orange indique visuellement l'objet glissable que vous avez choisi.
Déclencher une action liée au déplacement
Vous avez la possibilité de déclencher l'action de votre choix 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
Si votre zone de dépôt a de plusieurs associations, ces trois déclencheurs seront disponibles pour chaque 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.
