Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

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

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.

In this Bubble tutorial video, I'm going to demonstrate to you how to use this amazing new plugin by Minimum Studios Drag and Drop Repeating Group. I have tried over the years all of the plugins 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 repeating group, 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 columns, let's set that to two rows and let's just make this a little bit wider and make rows columns into three. Great, then let's add in some labels. Make it a little bit responsive 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 do a search for because a do a search for hasn't got an order to it. But what we can do is we go On page load and then if I show you here on the page itself, I've already set up a Custom state of contact's contact list. So that means that on page load I can Set state 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 data as a data type 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 HTML ID. 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 dragging items between multiple repeating groups. 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.

 

Latest videos

menu