Introduction to Drag and Drop Repeating Groups in Bubble.io
In this Bubble tutorial video, I'm going to demonstrate 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 this plugin. It literally only came out a few days ago, and I can't wait to demonstrate it to you.
Setting Up the Repeating Group
So in my Bubble app, I'm going to add in a repeating group and set it as type contact. Yeah, being able to reorder a repeating group - this is going to be essential if you are trying to build Kanban boards or you're building a project management or task management tool in Bubble. This is just going to add so much to your app.
So we then have columns that's 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 to 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 out the sale and great.
Configuring the Data Source
Okay, so for the source, the data source for this repeating group, we can't use a "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 contacts contact list. So that means that on page load, I can set state of my page contacts, and here is where I can do my search for contacts. And just to show you from a previous demo, I've got this data as a data type contacts - a list of people. Then I can give the data source my custom state, which is my page contacts. Let's preview that.
Implementing Drag and Drop Functionality
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 to the page, and then I need to do a matching up of the HTML ID. So on repeating groups under ID attribute, 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 the Drag and Drop Feature
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 color. So now I drag it over, it works wonderfully.
Conclusion and Recommendations
I'd really encourage you to go and check out this plugin. I'm just being amazed by it. I've seen on Twitter over the last few days, and you can even do things such as dragging items between multiple repeating groups. 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!