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.
Unlock the power of drag-and-drop: Learn how to create dynamic repeating groups in Bubble with this game-changing plugin!
Transform your Bubble app: Discover how to build Kanban boards and project management tools with ease using this amazing drag-and-drop feature.
Elevate your no-code skills: Master the art of reordering repeating groups and take your Bubble app development to the next level!
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!
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.