Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Drag It - Enhance Your Repeating Groups with Drag-and-Drop Functionality: Rearrange, Sort, Reorder, and Transfer Items Between RGs Effortlessly

Showcase Plugins
#1

Hey there, fellow Bubblers! :rocket:

We’re super excited to share our latest creation with you: the “Drag It” plugin, which we’re pretty sure will drag you to new heights (see what we did there? :grinning_face_with_smiling_eyes:) in your app!

image
image1665×1010 242 KB

Example

Move RG Items
Move RG Items1264×720 2.67 MB

It’s a powerful and user-friendly tool that allows you to add drag-and-drop functionality to your Bubble app’s Repeating Groups.

With “Drag It”

you can build kanban boards :clipboard:
shopping carts :shopping_cart:
playlists :notes:
photo galleries :framed_picture:
and so much more!

What’s great about “Drag It” is its compatibility with any data type and any layout style.

image
image2269×784 176 KB

You can also customize the appearance and behavior of the drag-and-drop elements to suit your app’s design and functionality.

But wait, there’s more! You can even access the drag-and-drop events and data in your workflows to trigger actions or update your database. :star2:

Ready to give “Drag It” a spin? :tornado: Check out our playground here:

We’re confident that it’ll become one of your go-to tools for creating user-friendly and interactive web applications on Bubble.

When you’re ready to take the plunge, visit our plugin page:

How to setup “Drag It” like a pro:

:one: Add “Drag It” to your Bubble app.

:two: Input the ID of your repeating group(s) and include the data.

:white_check_mark: Done

We hope you’re as excited about “Drag It” as we are!

If you have any questions or feedback, feel free to reach out to us in the comments or via direct message. We’re here to help you get the most out of the plugin and make your web app even better.

Try it out today and see for yourself how it can enhance your web app’s functionality and user experience!

7 Likes
#2

Reordered list can be saved to the database?

3 Likes
#3

Hello @MarkusBoostedApp

Definitely!

With Drag-It’s stats, you can access a wealth of information, including the updated list, the item that was moved, and both the current and previous index of the item. You can see all of this and more in the image provided.

image
image531×739 26.7 KB

This list is like what you would get from a repeating group. You can display the new list in another repeating group or save it to a database to manipulate like any other list.

If you have any queries, we are available to assist you. :cowboy_hat_face:

1 Like
#4

Sounds good! Does it work with nested repeating groups?

2 Likes
#5

It’s great to hear that you’re interested in using the drag it plugin. :star_struck:

If the data type you’re set on Drag It is same with the RG data source, you’ll be able to easily move anything to anywhere you need it to go. :arrow_upper_right: :arrow_lower_right: :arrow_down: :arrow_left: :arrow_upper_left:

In other words, in a nested repeating group, you can specify which RGs exchange data with each other by defining different groups name in Drag it. :loop:

You can group parent RGs together and move internal RGs around. :atom_symbol:

Have you had a chance to check out the demo page yet?

On the second tab, you’ll see that we’re able to move data from one RG to another, and we can access the updated list of both after each change.

There are so many ways you can use this plugin - you can even use it with the normal group and change its internal elements.

Let me know if you have any questions or if there’s anything else I can help you with.

2 Likes
#6

Easily Move Data Between Repeating Groups

:loop:

RG to RG
RG to RG1080×446 3.36 MB

Editor

Web capture_22-4-2023_201758_bubble.io
Web capture_22-4-2023_201758_bubble.io2049×1019 214 KB

Do you want to see with your own eyes?
Editor Link

#7

Thank you for this wonderful plugin. I purchased it straight away. You should be charging more for it. I have one issue and I am not sure if I am doing it wrong or the plugin has an issue.

I have a RG that displays a list of things that are attached to a thing. So it’s like Current page's thing' list of things

I am sorting it just fine and I can save the new list with set list Dragit updated list, but but then the original RG stops “working” and doesn’t update with the new list.

The list in the database updates and I can see it in another RG but this RG which initially has the list and the drag-it attached to it just remains as “it is” for consequent sortings.

Can you help?

1 Like
#8

Hi there,

Does your plugin also work with a list of text?

My app has an empty repeating group with a text data type. Users can add and remove text items in a repeating group (Data do not get saved in the database) and once they hit the save button, I want to get that repeating group’s list of text data in a rearranged format.

Is it possible with your plugin?

Thanks

1 Like
#9

Yeah, it works exactly like that. The plugin is super useful and lightweight from my testing. You can also access many properties of the list on the front end so you can trigger the save either “on list update” or manually with a button.

1 Like
#10

Hello @Raku ,

I hope you are doing well. I’m happy to let you know that Drag It works seamlessly with any data, including everything you can use in Repeating Group. We have also added a new tab based on an example that uses an option set.

Please don’t hesitate to reach out if you have any questions or need further assistance. We are always here to help you out.

Best regards,
@NoCodeDataArtisan

#11

Hey @akamarski :wave:

We’re really glad to hear that you found our plugin useful and we appreciate you taking the time to reach out to us. :star_struck: :pray:

We understand that some plugin builders might set higher prices for their products, but our goal is to make it easy and affordable for everyone to bring their ideas to life. We believe that creativity and innovation should be accessible to everyone, regardless of their budget.

That being said, we do have to charge a fee for our plugins to cover our costs and keep our team running. However, we strive to keep our prices fair and competitive, while still providing top-notch quality and support.

And just so you know, if someone can’t afford to pay for our plugins, we’re more than happy to hook them up with a freebie. We want to help as many people as we can turn their dreams into reality.

About the issue, it is possible to access the editor so that I can make the appropriate settings according to your data app.

Thanks again for your support, let me know either here or in other ways so that I can guide you and if you have any more questions or suggestions, please don’t hesitate to hit us up.

Cheers

#12

Thanks for the great plugin. i bought it right away.

However, I have a problem. When I move images, they always jump to a random place in the repeating group. Am I doing something wrong or is this a bug?

ezgif-1-3eea971688

1 Like
#13

I can’t share editor link because it’s for a live app with lots of workflows.

I have the following setup:

The page type is User. Each user has list of Messages on it.

  1. On the page there is a RG - showing This User's List of Messagess.
  2. There is Drag-it element on the page
  3. The RG ID and the ID in the Drag-it is the same

**I reorder the RG, everything works and I can save the updated list in a workflow “Make changes to a thing” → This user → ** List of messagess set list DragIt A's Updated List - It works until this point. The list is saved correctly and I can display it in another RG in real time.

BUT the original RG from where I actually reorder the items stops working. It shows the old order before the reordering and doesn’t refresh with the new list when it is saved. The only solution is to reload the page.

edit: I didn’t mean this to be a reply to kreativorgan. It should be to NoCodeDataArtisan

1 Like
#14

Are you saving them too?

I am having a similar issue. When saving them, they save correctly in the database but the parent RG that is being reordered doesn’t update with the “new” list and acts weird. If I refresh the page - it’s okay.

1 Like
#15

Hello @kreativorgan
Thank you for purchasing the plugin, I’m glad you find it helpful! :star_struck:

Regarding the issue you’re experiencing with the images jumping to a random place in the repeating group, it’s also possible that there’s something in your settings that may be causing this behavior.

:wrench:
To better understand the issue and troubleshoot it, it would be helpful to have access to your application editor. If that’s not possible, could you create a test app with the same settings to see if I can replicate the issue and find a solution?
(I will add the plugin to that app)

Please let me know if you’re comfortable with providing access to the application editor or if you would like to create a test app. In the meantime, I’ll do my best to assist you in resolving the issue. :pray:

#16

Hey @akamarski
I just wanted to say that I really appreciate how helpful you are to others - it’s truly valuable. :pray:

Regarding the repeating group, unfortunately, we don’t have access to change its data source, through a plugin. However, we provide the updated list through Drag It’s state, so you can get the most recent data from there and use it for any purpose just like RG’s state (list of …).

Also, the repeating group is displaying the same order as the updated list, so I’m curious - is there a specific reason you want to change and update the source repeating group? If you can give me a bit more information, I’d be happy to help you find a solution to any challenges you’re facing.

If you prefer, we can communicate via email or message - just let me know!

Thanks again for all your help!

#17

I think he’s referring to an issue that happens with other similar plugins as well. they use a “refresh” element action after the save click. The RG data needs to be reset as well.

After your first save if you don’t reset/refresh the RG you’re working with or update the data source the plug-in is still pulling from the original pre reordered source. This tends to only be an issue when the user is trying to reorder save and then continues to reorder without any page switches, resets, or refreshes of both RG and drag element data.

The index’s of the list are just off which is why it appears to reorder images randomly in reality it’s using a pre re ordered list and a new reordered list index orders.

2 Likes
#18

Dear @chris.williamson1996,

I would like to express my gratitude for your assistance with the challenge we were facing. Your willingness to take the time to explain the issue was truly invaluable to us. It is greatly appreciated. :pray: :pray: :pray:

Rest assured that we are making every effort to resolve this issue as quickly as possible. :man_mechanic:

@akamarski @kreativorgan
Please accept our sincere apologies for any inconvenience caused. If we had been aware of the issue beforehand, we would have taken immediate action to rectify it before publishing.

#19

I see you did an update but it still behaves the same way. The original RG that was reorderd becomes messy and does not show the new list in it until page reresh.

Is there anything specific I have to add to the workflow after the DragIt list is updated?

1 Like
#20

Hello,

As promised, we have made every effort to resolve the issue as quickly as possible. We would like to give special thanks to @chris.williamson1996 for his excellent guidance. :pray:

If you update the plugin, a new state called “RG Sync Source” will be added, which you can use for RG data source to resolve conflicts between drag-and-drop and repeating groups.

Web capture_23-4-2023_225013_bubble.io
Web capture_23-4-2023_225013_bubble.io547×722 58.8 KB

You can use this state to receive updated lists as before, by passing data to the Drag Data state.

Please share your experience or if you encounter any errors or potential issues, please let us know so that we can quickly resolve them.

We apologize again for this error and hope that we can continue to provide better services to you.

Best regards,
@NoCodeDataArtisan

1 Like