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. 

Comment ça marche ?

Une action de “drag & drop” est composée de deux objets : 

  • l’objet qui se déplace : le « glissable »
  • le conteneur qui accueille l'objet glissable : le « déposable ».

Le composant Drag & Drop vous permet d'autoriser le déplacement du glissable, de définir l'élément déposable (qui peut être une zone transparente) et de créer l’association entre un glissable et un déposable et les actions liées !

 

Autoriser le déplacement d'un objet

Ouvrez la fenêtre Composants et choisissez le Drag & Drop.  Double-cliquez sur la zone du composant pour insérer à l'intérieur l'élément visuel qui sera glissable (par exemple une image PNG).

Ouvrez la fenêtre Propriétés du composant.

Cochez l'option Glissable (draggable) dans la liste. A savoir, un objet peut être à la fois glissable et déposable. 

parametres.png

Définir une zone de dépôt 

Ajoutez un nouveau composant Drag & Drop. Ce composant peut être vide. 

Dans la fenêtre Propriétés, cochez la case Déposable (droppable)

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

Déclencher une action au glissement

Sélectionnez votre composant glissable et cliquez sur l’icône Interactivités.

Dans la liste des déclencheurs, découvrez deux déclencheurs spécifiques :

  • 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 un objet déposable) 

drag-and-drop-interactivites.png

 

Déclencher une action au dépôt

Pour créer des actions liées au dépôt, 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.

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous