✅
Link to the plugin page: https://zeroqode.com/plugin/drag--drop-to-reorder-rg-1624284188439x314009559960327230
Demo to preview the settings
✅
Introduction
Easily add a drag-and-drop sortable repeating group to your app. Reorder cells using swap or handle modes, move items within a group or between multiple repeating groups, and have all changes instantly saved to the Bubble database. Fluid CSS animations keep interactions smooth and your UI feeling modern and responsive.
🚨
Important: Plugin does not support Nested Repeating Group
How to setup
Step 1 – Install the Plugin
- Go to the Plugin Tab
- Open your Bubble Editor.
- Navigate to the Plugins tab on the left panel.
- Add Plugins
- Once in the Plugins tab, click the Add Plugins button.
- Search for the Plugin
- Use the search bar to type Drag & Drop to Reorder RG
- Locate the plugin in the search results.
- Install/Buy
- Click Buy and follow the purchase instructions.
- Charges will be added to your Bubble billing account.
- Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
- Plugin Installed
- Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
- Open the Design tab in your Bubble editor.
- Search for the Dragable RG element in the Elements panel.
- Drag and drop the element onto your page.
Step 3 – Configure Privacy Settings
⚠️
Note: Please make sure your Data API and privacy rules are correctly configured, otherwise database actions may not work as expected.
1) Confirm the Data API is enabled
- In the Bubble editor, go to Settings.
- Open the API tab.
- Check Enable Data API.
- Under the Data API settings, ensure your relevant Data types are enabled/exposed for the API (if your setup shows a per–data type option).
Reference: https://bubble.io/reference#API.get_api
2) Open the Privacy rules for the data type you’re using
- Go to Data (sometimes labeled Data / Database).
- Click the Privacy tab.
- Select the data type you’re working with (e.g.,
User,Order,Message, etc.).
3) Create or edit a privacy rule for API access
- Inside the selected data type, click Define a new rule (or edit an existing rule).
- Set When (the condition) so the rule applies to the right users/records (examples):
- “Current User is logged in”
- “Current User’s role is Admin”
- “This thing’s owner is Current User”
- In the permissions section, make sure the API can do what you need:
- Allow viewing fields you need to read via API
- Allow creating via API (if you’re creating records)
- Allow modifying via API (if you’re updating records)
⚠️ Note: For database work via API, the privacy rule must explicitly allow Create and/or Modify for that data type—otherwise calls may succeed in the workflow but not actually write data (or may return empty/unauthorized results).
4) Verify field-level access (so the API returns/accepts the right fields)
- In the same privacy rule, look at which fields are visible.
- Ensure any fields you need to read are allowed to be viewed.
- Ensure any fields you need to write/update aren’t blocked by the rule.
Step 4 – Configure Properties
Select the element and configure its properties in the Property Editor like Repeating Group ID, Things Data, and color customization fields.
Plugin Element - Dragable RG
Easily add drag-and-drop sorting to repeating groups, allowing cells to be reordered within or between groups using swap or handle modes, with changes saved to the Bubble database and smooth CSS animations.
Element Fields
Title | Description | Type |
Repeating Group ID | The ID of the repeating group | Text |
Sort | Enable sort in a repeating group. Sorting allows drag-n-drop between items | Yes/No |
Animation Time (ms) | Animation time of dropping the item in the group | Number |
Swap | Enable swaps of elements | Yes/No |
Handle | The ID of the handle element. Handler, which is an area of every list element that allows it to be dragged around | Text |
Easing | Type of easing | Enum |
Background Color of the draggable element | Background Color of the draggable element | Color |
Background color of ghost element | Ghost element remaining on the initial position while is not dragged to another location | Color |
Background color of the new position of the dragged element | The background color of the new position of the dragged element | Color |
Group Name | Then is indicated allow dragging between RG with the same group name | Text |
Title of table | Title of the table from database which represents items in the list | Text |
Things | List of unique_id of items in RG | List of text |
Sort data | List of sort field of items in RG | List of numbers |
Enable Deleting | Then is checked, will cause the dragged item to be removed from the base | Yes/No |
Enable empty area | When the RG is empty shows an area to make it easier to transfer items to an empty RG | Yes/No |
Height of the empty area | Height of displayed empty area in pixels | Number |
Background color | The background color of the empty area | Color |
Border style | The border style of the empty area | Enum |
Border color | The border color of the empty area | Color |
Border width | The border width of the empty area in pixels | Number |
Text color | Color of the text in the empty area | Color |
Element text | Inner text of the empty area | Text |
Delay on touch only | Only delay if is using touch | Checkbox |
Delay time (ms) | Time in milliseconds to define when the sorting should start | Number |
Increase delayed element | Will increase the delayed element | Checkbox |
Element Actions
Toggle sortable
Enables or disables drag-n-drop in RG.
Fields:
Title | Description | Type |
Enable | Enable or disable drag-n-drop in RG | yes/no |
Refresh RG
Triggers a re-render of the Repeating Group.
Sync of sorting with DB
Synchronizes sorting with the database.
Fields:
Title | Description | Type |
Sort type | The type of data to be synchronized with | App Type |
Sort data source | The data field to be synchronized with | Field of Data Type |
Sort ID | IDs of synchronization objects | Text |
Sort order | A field with values for sorting the database | Number |
Repeating Group ID | The repeating group ID used in the element | Number |
Element Events
Title | Description |
Out Of Container | Is triggered when an element is dropped out of the container |
Dropped In Another Group | Is triggered when an element is dropped in another group |
Delete Success | Is triggered when an element is deleted from the database |
Delete Fail | Is triggered when an attempt to delete an element from the database fails |
Item moved | Is triggered when an element is moved inside of the RG |
Add to another group | Is triggered when an item is added to the group |
Element States
Title | Description | Type |
Plugin Message | Returns the status of deleting an item | Text |
Item unique_id | Returns item unique_id | Text |
From Table | Returns title of the table from where to get an item | Text |
To Table | Returns title of the table from where to put an item | Text |
Is Enable | Returns information if the element is enabled | Yes/No |
New Sort Of Item | Returns new value for sort field of an item | Number |
Cell's New Position | Returns new position value of an item | Number |
Cell's Old Position | Returns old position value of an item | Number |
Swap Item unique_id | Returns the swapped item id | Text |
Plugin Actions
Move in Base
This action move item between database tables via API call.
Fields:
Title | Description | Type |
From | Title of your data table from where an item will be copied | Text |
To | Title of your data table to where an item will be copied | Text |
ID | Item's unique_id | Text |
Delete Item From Table | If checked, the item will be deleted from the initial table | Yes/No |
New index of the element | Position of the element in the new data table | Number |
Previous element sort | Sort value of the previous element in the new table | Number |
Next element sort | Sort value of the next element in the new table | Number |
Title of the sort field | Title of sort field in data | Text |
Example of tables:
Workflow Examples
Initial Setup
- Place a Repeating Group element on the page & set and ID to it
- Place the Draggable Element on the page
- Configure the Repeating Group ID field with the ID of the Repeating Group element. Inside the Things field setup the list of unique IDs of the elements from the Repeating Group element
Moving Between Databases (Kanban board)
Use the plugin element to move between two databases.
- Add two Repeating groups and each group has its own plugin element.
- Configure each plugin element for each Repeating group. In field ‘Repeating Group ID’, specify the ID for each Repeating group, in field ‘Title of table’, specify the name of the database of each Repeating group, in field ‘Things’, specify the data source of each Repeating group.
- Using event ‘Dropped In Another Group’ and the plugin states for each element, configure the workflow for obtaining the desired movable database object.
- Run action ‘Move in Base’ to move objects from one database to another.
- We need to configure database privacy settings since adding a record to another database and deleting a record from the old database are performed via API.
⚠️
If your database stores confidential data, it is better not to use this functionality (Moving Between Databases - Kanban board)
- Now, in the settings under the API section, we need to enable the API for the databases we use.
⚠️
In the database, it is better to name the field responsible for the sorting number with a "_number" suffix. For example: "sort_number". It must be of the Number type.
Swap or Handle Elements
If you need to drag the cells of a repeating group by interacting with a separate element in the cell, use field ‘Handle’, which specifies the ID of the individual element.
Sorting Mode
Use case 1. Instant saving to the database.
- Configure plugin element.
- Use the database field to sort Repeating groups.
- When moving items, use event ‘Item moved’ to record new sorting values in the database.
- Update a Repeating group using action ‘Refresh RG’.
Use case 2. Saving to the database with action.
- Use steps 1 and 2 from the previous use case.
- Synchronize the changes made when dragging items with sorting in the database at the right moment using action ‘Sync of sorting with DB’ (for example, starting the action with a separate button or when loading a page).
- Update a Repeating group using action ‘Refresh RG’.
Changelogs
Update 18.12.25 - Version 1.49.0
- Bubble Plugin Page Update (Logo).
Update 01.12.25 - Version 1.48.0
- Bubble Plugin Page Update (Description).
Update 14.11.25 - Version 1.47.0
- Bubble Plugin Page Update (Description).
Update 14.11.25 - Version 1.46.0
- Bubble Plugin Page Update (Description).
Update 06.11.25 - Version 1.45.0
- fixed 'Sync of sorting with DB' action.
Update 29.10.25 - Version 1.44.0
- Bubble Plugin Page Update (Description).
Update 29.10.25 - Version 1.43.0
- Bubble Plugin Page Update (Description).
Update 29.10.25 - Version 1.42.0
- Bubble Plugin Page Update (Description).
Update 21.08.25 - Version 1.41.0
- Bubble Plugin Page Update (Logo).
Update 14.08.25 - Version 1.40.0
- Bubble Plugin Page Update (Logo).
Update 08.07.25 - Version 1.39.0
- updated to version 4.
Update 12.06.25 - Version 1.38.0
- Marketing update (minor change).
Update 14.11.24 - Version 1.37.0
- Minor update (Marketing update).
Update 24.10.24 - Version 1.36.0
- Minor update (Marketing update).
Update 06.08.24 - Version 1.35.0
- Minor update.
Update 19.06.24 - Version 1.34.0
- Added new functionality of database sorting mode and the action "Sync of sorting with DB".
Update 19.06.24 - Version 1.33.0
- Minor update.
Update 10.06.24 - Version 1.32.0
- Updated demo/service links.
Update 15.02.24 - Version 1.31.0
- Fixed console errors.
Update 31.01.24 - Version 1.30.0
- added 'Add to another group' event.
Update 28.11.23 - Version 1.29.0
- Added field 'Increase delayed element'.
Update 09.11.23 - Version 1.28.0
- Delay on touch only", "Delay time (ms).
Update 25.10.23 - Version 1.27.0
- Fixed Sorting mode.
Update 18.10.23 - Version 1.26.0
- Updated description.
Update 15.09.23 - Version 1.25.0
- updated description.
Update 12.09.23 - Version 1.24.0
- minor updates.
Update 06.09.23 - Version 1.23.0
- Obfuscation.
Update 11.07.23 - Version 1.22.0
- updated description.
Update 21.03.23 - Version 1.21.0
- Fixed "Refresh RG" action and Swap mode, added "Cell's Old Position", "Swap Item unique_id" states.
Update 02.03.23 - Version 1.20.0
- minor fixes.
Update 23.02.23 - Version 1.19.0
- deleted the icons.
Update 22.02.23 - Version 1.18.0
- updated the description.
Update 02.02.23 - Version 1.17.0
- Updated description.
Update 27.01.23 - Version 1.16.0
- fixed dynamic change data source.
Update 25.01.23 - Version 1.15.0
- adjusted for Bubble Version 21.
Update 20.01.23 - Version 1.14.0
- Updated description.
Update 20.01.23 - Version 1.13.0
- Added "Cell's Old Position" state.
Update 03.01.23 - Version 1.12.0
- minor fixes.
Update 15.12.22 - Version 1.11.0
- Added possibility to change the source dynamically.
Update 08.12.22 - Version 1.10.0
- minor fixes.
Update 17.11.22 - Version 1.9.0
- Minor fixes.
Update 02.09.22 - Version 1.8.0
- increased reorder speed loading.
Update 13.05.22 - Version 1.7.0
- fixed "reorder rg" action.
Update 12.04.22 - Version 1.6.0
- fixed reading the order from the database.
Update 30.03.22 - Version 1.5.0
- minor changes.
Update 24.03.22 - Version 1.4.0
- Restored work on mobile devices.
Update 21.08.21 - Version 1.3.0
- Added the ability to set the value of the sorting field while moving between bases.
Update 06.07.21 - Version 1.2.0
- Updated description and icon.
Update 05.07.21 - Version 1.1.0
- Updated name.
Update 29.06.21 - Version 1.0.0
- Initial Release.