Utiliser le glisser-déposer (drag & drop)

drag and drop

Si vous souhaitez intégrer des modules ludiques au sein de votre application, vous aurez grand plaisir à découvrir le composant Glisser-déposer.

Par une action de “glisser-déposer”, vous permettez à votre utilisateur de déplacer des éléments avec son doigt et de les déposer sur une zone précise.

1. Créer une action de “glisser-déposer”

a. Le principe

Une action de “glisser-déposer” est composée de deux types d’objets : 

  • ceux qui peuvent faire l’objet d’un déplacement (« glissables ») 
  • ceux qui peuvent accueillir la réception, les cibles (« déposables »).

Il vous faut utiliser le composant Glisser-déposer pour chacun de ces objets, leur attribuer un rôle (glissable ou déposable) et créer l’association gagnante entre glissable et déposable !

Par défaut, tous les objets glissables ne sont pas acceptés par les objets déposables : il vous faut définir les associations acceptées !

b. Créez

Cliquez sur l’icône Glisser-déposer dans le menu Composants, insérez autant de composants que d’objets nécessaires (glissables et déposables), et double-cliquez sur chacune des zones créées pour éditer son contenu.

c. Paramétrez

Une fois dans la fenêtre Propriétés, vous avez accès aux fonctionnalités suivantes :

  • EDITER LE GLISSER-DÉPOSER : c'est ici que vous décidez du contenu de votre zone glissable ou déposable. Tout ce que vous insérez dedans sera glissable ou déposable selon votre choix.
  • Interaction utilisateur : cette option permet à l’utilisateur de bénéficier des fonctionnalités du composant (ici, faire glisser ou déposer). Par défaut, cette option est toujours cochée. En décochant cette option, l’utilisateur ne pourra plus glisser ou déposer.

  • Options : c’est ici qu’il vous faut définir si votre objet peut être glissable, déposable, ou bien les deux.

parametres.png

A ce stade, pensez bien à renommer tous vos objets. Vous pourrez plus facilement les sélectionner et leur attribuer des actions dans les étapes qui suivent… :-)

d. Associez

Il vous faut maintenant associer le (ou les) objet(s) glissable(s) qui peuvent être acceptés sur l’objet déposable. Cette opération s’effectue seulement à partir de la fenêtre Propriétés de l’objet déposable. Cliquez sur + AJOUTER GLISSABLE et choisissez dans la liste les objets glissables acceptés. Une couleur orange indique visuellement le glissable que vous avez choisi.

association.png

2. Aller plus loin dans l’interactivité

 Note: cette section s’adresse à ceux qui sont déjà familiarisés avec les notions d’interactivité. Si ce n’est pas encore le cas, nous vous invitons avant tout à lire l’article Comprendre les déclencheurs

Votre composant Glisser-déposer va encore plus loin : il vous permet également d’accéder à de nouveaux types de déclencheurs liés à votre action “glisser-déposer”. C’est une nouvelle étape franchie dans la liberté de création et l’interactivité maximum ! :-)

a. Les déclencheurs liés à un objet glissable

Sélectionnez votre objet glissable et cliquez sur l’icône Interactivités. Dans la liste des déclencheurs, vous découvrez deux déclencheurs spécifiques :

drag-and-drop-interactivites.png

  • Glisse : quand votre utilisateur vient de placer son doigt sur votre objet glissable et qu’il commence son déplacement

  • Retour : quand votre utilisateur relâche la pression sur votre objet glissable et que ce dernier est renvoyé à son emplacement initial (aucune association avec un objet déposable)

b. Les déclencheurs liés à une association

Pour créer des actions liées à une association, sélectionnez votre objet déposable (qui a fait l’objet d’une association au préalable) et vous avez accès à de nouveaux déclencheurs :

drag-and-drop-2.png

  • Dépose (nom du glissable) : quand votre utilisateur relâche la pression sur votre objet glissable et que ce dernier est bien positionné sur l’objet déposable (association réussie)

  • Entre (nom du glissable) : quand votre utilisateur atteint la zone du déposable avec son objet glissable

  • Sort (nom du glissable) : quand votre utilisateur quitte la zone du déposable avec son objet glissable

Attention : si votre objet déposable fait l’objet de plusieurs associations, ces trois déclencheurs seront disponibles pour chaque glissable.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 1

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !