Le Drag and Drop est une feature communément utilisée sur le web, et Bubble ne fait pas exception à cela.
Que vous construisiez un outil de project management, un organisateur visuel, ou un dashboard dynamique, implémenter des features de drag and drop peut considérablement améliorer l'expérience utilisateur de votre app.
Dans ce tutorial complet, nous passerons en revue le processus étape par étape pour créer des interactions drag and drop fluides et responsive dans Bubble – sans aucun code.
Étape 1 - Construire votre interface
Dans cet exemple, nous utiliserons une interface Kanban. Mais soyez rassurés, les techniques resteront les mêmes si vous travaillez sur un design différent.
Si vous comprenez les bases, vous pourrez le faire fonctionner dans votre app.
Voici à quoi ça ressemble :
Avant d'aller plus loin, montrons-vous comment le Kanban est construit (c'est important pour comprendre la suite) :
Comme vous pouvez le voir ci-dessus, le Kanban est composé de deux Repeating Groups :
Le premier affiche une liste de Tasks Statuses (Option Set). Il va horizontalement de gauche à droite (il s'appelle Repeating Group Kanban Columns, dans l'éditeur).
Le second est le Repeating Group affichant la liste des Tasks.
C'est une façon dynamique de construire un Kanban. C'est utile pour permettre aux utilisateurs de créer leurs propres colonnes.
Cependant, selon votre app, vous pourriez avoir des colonnes statiques. Gardez à l'esprit que ça fonctionnera plus ou moins de la même façon.
Étape 2 - Installer un Plugin Drag and Drop pour Bubble
Très bien, maintenant que nous avons une compréhension basique de notre kanban, nous pouvons continuer et installer le plugin Draggable Elements pour Bubble.
Vous pouvez le trouver en allant dans l'onglet "Plugins" dans votre app, et chercher "Drag".
Ce plugin est fait par l'équipe de Bubble, et est complètement gratuit.
Étape 3 - Comprendre comment le Drag and Drop fonctionne dans Bubble.io
Une fois que vous avez installé ce plugin, vous verrez deux nouveaux éléments dans votre app :
1 - Le Drag/Drop Group : C'est le group qui sera déplacé par vos utilisateurs
2 - La Drop Area : C'est une zone dans laquelle vous pouvez drop des Drag/Drop groups
Ce sont les éléments qui nous permettront de construire notre système de Drag and Drop.
Un item sera déplacé, l'autre l'attrapera. Aussi simple que ça.
Étape 4 - Ajouter votre Drop Area
Première chose d'abord, ajoutons notre Drop Zone.
Dans notre exemple, la Drop Zone doit couvrir toute la hauteur de chaque colonne, afin de permettre à nos utilisateurs de drop des éléments dedans.
Pour faire cela, nous devons simplement "transférer" le Repeating Group qui affiche la liste des tâches dans la Drop Zone.
De cette façon, toute la colonne sera à l'intérieur d'une Drop Zone.
Important : Assurez-vous de remplir le Type of Content et la Data Source si nécessaire.
Vous pouvez aussi modifier le paramètre "Tolerance", mais la valeur recommandée est "Intersect".
Étape 5 - Ajouter votre Draggable Element
Maintenant que nous avons notre Drop Area prête, nous pouvons passer à la création de notre objet mobile actuel.
Cela peut être fait avec l'élément "Drag/Drop Group".
Basiquement, tout ce que nous devons faire est transférer l'élément que nous voulons rendre mobile, à l'intérieur du Drag/Drop group.
De cette façon, tout le contenu qui est à l'intérieur du Drag/Drop group sera déplacé avec lui.
Important : Assurez-vous de définir le Type of Content et la Data Source si nécessaire.
Encore plus important : Assurez-vous de cocher l'option "Make this element droppable", et changez le behavior post drop à "Move back"
Maintenant à ce point, si vous prévisualisez votre app, vous devriez pouvoir drag des groups partout sur votre page.
Étape 6 - Ajouter vos Workflows
Étape finale, nous devons faire en sorte que notre app fasse effectivement quelque chose quand nous droppons un élément dans notre Drop Zone.
Pour faire cela, nous pouvons ajouter un workflow et sélectionner l'event "A drop area has a group dropped on it".
Cela déclenchera ce workflow à chaque fois qu'un Draggable group est lâché sur la Drop Area.
Maintenant que vous avez ajouté ce nouveau workflow, assurez-vous de sélectionner la bonne Drop Area (si vous en avez plusieurs sur la même page), et plus important :
Assurez-vous de sélectionner le Type of Things. C'est crucial, si vous le laissez vide, ou sélectionnez le mauvais type, ça ne fonctionnera pas.
Maintenant que c'est fait, vous pouvez faire n'importe quelle action nécessaire dans ce workflow.
Dans mon exemple, j'ai simplement besoin de mettre à jour le task status, alors voici à quoi ça ressemble :
Et voilà, maintenant vous savez comment faire du Drag and Drop dans Bubble !
