How to create drag and drop repeating groups in Bubble.io

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble.io tutorial video we demonstrate how to add drag and drop to your Bubble app. We set up the plugin 'Drag & Drop Repeating Group' by Minimum Studio and show you the first steps needed for creating a kanban board or task manager in Bubble.

that supposedly enable drag and drop in repeating groups and none of them work as well as the this plug in and it literally only came out a few days ago and I can't wait to demonstrate it to you.

Drag and drop examples


So in my Bubble app I'm going to add in a repeating group and set it as type contact. And yeah, being able to reorder a
, this is going to be essential if you are trying to build kanban boards (like a Trello clone) or you're building a project management or task management tool (like an Asana clone). In Bubble, this is just going to add so much to your app.

So we then have
as we go. So this is going to be current cell's contact, first name, current cell's contact, last name, make it fill up the cell.

Repeating group data source


Great. Okay, so for the source, the data source for this repeating group we can't use the
of my page contacts. And here is where I can do a search for contacts.

And just to show you from a previous demo, I've got this
contact, a list of people and then I can give the data source my custom state which is my page contacts. Let's preview that.

HTML ID Attribute


Okay, so there are my contacts. Now let's make it drag and drop. So the plugin that we'll be using is this one by Minimum Studio and I've already added it into my Bubble app. So I add the elements the page and then I need to do a matching up of the
. So on repeating groups under ID attributes I can call this RG for repeating group contacts.

Copy and paste that into here. I need to add a hash before because it's an HTML ID and then data type is of contact. Handle would be if you only wanted part of the cell to enable drag and drop. But that looks like I have everything that's needed. Oh, one last thing. In the documentation they do make it clear that you need to have show all elements immediately.

Testing & drag and drop demo


Okay, so let's try dragging Peggy Carter to the start. Let's drag Natasha Romanoff there and we see it's working. So this obviously is really rough in this design in order to make this video quick, but I will do one final thing just to make it work a little bit more nicely by adding a background colour.

So now I drag it over. It works wonderfully. So I'd really encourage you to go and check out this plugin. I've just been amazed by what I've on Twitter over the last few days, and you can even do things such as
. And also, there's a method for saving the reordering after you've reordered your cells in your repeating group.

So I might record some future videos on this plugin, depending on how well this video goes down. But I just wanted to show you how, having tried so many different Bubble plugins to add drag and drop to my Bubble apps in the past, this one is by far the best out there and I really rate it. So go and check it out.