Templates Plugins Courses

↪ Drag & Drop to Reorder RG - New Plugin from Zeroqode

This plugin allows you to easily embed a repeating group where cells can be sorted by dragging and dropping in a swap and handle modes. Cells can be moved both within a single repeating group as well as between 2 different repeating groups with changes saved in the Bubble database. Smooth CSS animation makes your UI friendly and nicer.

Features:

  • Moving items between 2 databases. Drag a cell from one RG into another RG, and the database will be changed accordingly.
  • Deleting items when dragging outside the RG area. It’s possible to enable/disable deleting via plugin action
  • Sorting. Reorder the RG, and the order will be reflected into another RG automatically
  • Supports both list and grid style layouts.
  • Swap mode
  • Drag Handle mode
  • 6 animation styles
  • Highlighting the dragged cell and drop area
  • Animation speed of dropping items in a group
  • Supports touch devices.

Live demo: https://zeroqode-demo-23.bubbleapps.io/draggable_rg

DEMO & DOCUMENTATION

Anastasija Volozaninova
Executive Assistant @ Zeroqode
#1 Bubble Publisher and Developer

logo-icon-S-circle

100+ Bubble Templates
25+ Bubble Courses
250+ Bubble Plugins
20+ Bubble Building Blocks
Convert Web to iOS & Android
No-code Development Services
Zero Code Conference Replay - watch all the no-code industry leaders share their expertise and insights on building and scaling startups without code

Hi there,

I just subscribed to this plugin. I am trying to figure out how to save the order of the items to the database. I can find any documentation about that. Could you provide me with the steps of how that’s done?

Thansk,

Grady

Hello, @gradylam!

Thanks for reaching out and for your interest in our products!

Regarding your question: all possible actions with elements using the plugin “Drag & Drop to Reorder RG” you can research at Editor Demo – Workflow. In your case:

And at the “Design” tab when you click on the Element “DragableRG G” there is a necessary option. Here you can sort your data:

You can also go over the Documentation of this plugin:

and find there more details about features and options the plugin can do.

Please let me know if you achieve the desired result or you have any additional questions 
Have a nice day! :slight_smile:

Regards,

Hello Lera,

Thanks for your reply. I am building a single-page web app. I have a list of boards in one column. When they are clicked, it will display a Kanban Board on the same page. Your plugin is used to move and arrange the Kanban tasks. But since all the board is on the same page, when I arrange the tasks/cards of one Kanban board, it affects the others too. So, I need to save the order to each Kanban board on their respective item on the database. The demo and the documentation is not quite clear on how to do that. Would you be able to share with me the steps that I will need to take to accomplish that?

Thanks,

Grady

Hello, @gradylam!

Due to the fact that we have some additional questions regarding your settings, can you please add our Support Team email to the list of collaborators to your application and provide me a link to your application? This will allow us to check your settings and run some tests to fix the mentioned problem.

To add our Support Team as a collaborator, you need to do the following steps in the Bubble Editor:
Settings > Collaboration > Add email [email protected]

Note: avoid the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.

Looking to hear you soon.
Regards,

Hi Lera,

Thanks for the quick response. I have added you to the collaborator role on a testing page. It simulates the page that we have in our actual app. Once we can resolve the issue in this page, I will implement the changes to the actual app that we have. Thanks for your help!

Grady

Hello, @gradylam!

I apologize for the long response. Our team will definitely check your application and provide you with an answer immediately!

Regards,

Hello, @gradylam!

Thank you for providing permission to test your page :pray:

We have checked the page “New_card_order”, where our plugin element is used. Of course, we didn’t do any changes to your page :slightly_smiling_face:

Our investigation showed that the plugin works correctly in your app. Thus we presume the problem solution lays in the plugin setup.

At the same time, we have noticed that you are using three different plugins at the same time, which do almost the same job. It’s quite possible that is necessary to create the right combination of them for correct working. But we would like to advise you to create a separate page and use only our plugin element (one) in order to achieve the desired result, as per our instructions.

Also please follow my previous instructions to make our plugin work well under the requested conditions (1st reply with screenshots). Since you have 3 plugin elements on the page and no data in the “Sort data” field (which is an essential setting), we presume you have not adjusted it yet. Please check the suggested setup and implement it on your page.

Also, you can try to use the other feature of the plugin – “Moving between database”, it might also suit your use case:

Please try again to customize your application and let me know if the desired result you’ll get.

Regards, Lera