Drag and Drop is acommonly used feature across the web.
Whether you're building a project management tool, a visual organizer, or a dynamic dashboard, implementing drag and drop features can significantly improve your app's user experience.
In this comprehensive tutorial, we'll walk through the step-by-step process of creating smooth, responsive drag and drop interactions in Bubble.io – no coding required.
Step 1 - Build your interface
In this example, we'll be using a Kanban interface. But rest assured, the technics will stay the same if you work on a different design.
If you understand the basics, you'll be able to make it work in your app.
Here's how it looks :
If you like this Kanban design, you can find it into our Components Library. Click here to find more 👉 https://www.nocodable-components.com/components-category/kanban
Before going further, let's show you how to Kanban is built (it's import to understand the rest) :
As you can see above, the Kanban is made of two Repeating Groups :
The first one is displaying a list of Tasks Statuses. It is going horizontally from left to right (it's named Repeating Group Kanban Columns, in the editor).
The second one is the Repeating Group displaying the list of Tasks.
This is a dynamic way of building a Kanban. This is useful to enable users to create their own columns.
However, depending on your app, you may have static columns. Bear in mind that it will work more or less the same way.
Step 2 - Install the Draggable Elements Plugin
Alright, now that we have a basic understanding of our kanban, we can go ahead and install the Draggable Elements plugin for Bubble.
You can find it by going into the "Plugings" tab in your app, and search for "Drag".
This plugin is made by Bubble, and is completely free.
Step 3 - Understand how Draggable Elements work in Bubble.io
Once you've installed this plugin, you'll see two new elements in your app :
1 - The Drag/Drop Group : This is the group that will be moved by your users
2 - The Drop Area : The is a zone in which you can drop Drag/Drop groups
These are the elements that will enable us to build our Drag & Drop system.
One item will be moved, the other will catch it. Simple as that.
Step 4 - Add your Drop Area
First thing first, let's add our Drop Zone.
In our example, the Drop Zone needs to cover the whole height of each columns, in order to enable our users to drop elements into them.
To do that, we simple need to "transfer" the Repeating Group that displays the list of tasks into the Drop Zone.
This way, the entire column will be inside a Drop Zone.
Important : Make sure to fill in the Type of Content and the Data Source if need.
You can also modify the "Tolerance" parameter, but the recommended value is "Intersect".
Step 5 - Add your Draggable Element
Now that we have our Drop Area ready, we can move on to creating our actual movable object.
This can be done with the "Drop/Drop Group" element.
Basically, all we need to do is transfer the element we want to make movable, inside the Drag/Drop group.
This way, all the content that is inside the Drag/Drop group will be moved with it.
Important : Make sure to set the Type of Content and the Data Source if needed.
Even more important : Make sure to check the "Make this element droppable" option, and change the behavior post drop to "Move back"
Now at this point, if you preview your app, you should be able to drag groups all over your page.
Step 6 - Add you Workflows
Final step, we need to make our app actually do something when we drop an element in our Drop Zone.
To do this, we can add a workflow and select the "A drop area has a group dropped on it" event.
This will trigger this workflow any time a Draggable group is dropped on the Drop Area.
Now that you've added this new workflow, make sure to select the correct Drop Area (if you have several on the same page), and most important :
Make sure to select the Type of Things. This is crucial, if you leave it empty, or select the wrong type, it won't work.
Now that this is done, you can do any action needed within this workflow.
In my example, I simply need to update the task status, so here's how it looks :
And there you go, your Drag & Drop system should now be working !
