Link to the plugin page: https://zeroqode.com/plugin/drag--drop-to-reorder-rg-1624284188439x314009559960327230
Demo to preview the settings
Introduction
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.
How To Setup
Place repeating group on the page
Set it ID Attribute
Place plugin element to the page and set RG id in the first field
Note: For work with database you need to check if data type privacy allows creating and modify via API (see in: Base -> Privacy -> Your data type -> Define a new rule) and in the app settings, is enabled Data API (see in: Settings -> API -> check Enable Data API -> check Your data type).
https://bubble.io/reference#API.get_api
Plugin Element Proprieties
Element Fields
Repeating Group ID
- The ID of the repeating group
- Required
- text
Sort
- Enable sort in a repeating group. Sorting allows drag-n-drop between items
- Required
- yes\no
Animation Time (ms)
- Animation time of dropping the item in the group
- Required
- number
Swap
- Enable swaps of elements
- Required
- 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
- Optional
- text
Easing
- Type of easing
- Required
- enum
Background Color of the draggable element
- Background Color of the draggable element
- Required
- color
Background color of ghost element
- Ghost element remaining on the initial position while is not dragged to another location
- Required
- color
Background color of the new position of the dragged element
- The background color of the new position of the dragged element
- Required
- color
Group Name
- Then is indicated allow dragging between RG with the same group name
- Optional
- text
Title of table
- Title of the table from database which represents items in the list
- Optional
- text
Things
- List of unique_id of items in RG
- Optional
- List of text
Sort data
- List of sort field of items in RG
- Optional
- List of numbers
Enable Deleting
- Then is checked, will cause the dragged item to be removed from the base
- Required
- yes/no
Enable empty area
- When the RG is empty shows an area to make it easier to transfer items to an empty RG
- Required
- yes/no
Height of the empty area
- Height of displayed empty area in pixels
- Required
- number
Background color
- The background color of the empty area
- Required
- color
Border style
- The border style of the empty area
- Required
- enum
Border color
- The border color of the empty area
- Required
- color
Border width
- The border width of the empty area in pixels
- Required
- number
Text color
- Color of the text in the empty area
- Required
- color
Element text
- Inner text of the empty area
- Required
- text
Element Actions
Toggle sortable
- Enable or disable drag-n-drop in RG
Refresh RG
- It Redraws the RG
Element Events
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 element is failed to delete
Item moved
- Is triggered when an element is moved inside of the RG
Element States
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
Plugin Actions
Move in Base
This action move item between database tables via API call.
Action fields
From
- Title of your data table from where will be copied an item
- Required
- text
To
- Title of your data table to where will be copied an item
- Required
- text
ID
- Item's unique_id
- Required
- text
Delete Item From Table
- If is checked item will be deleted from the initial table
- Required
- yes/no
New index of the element
- Position of the element in the new data table
- Optional
- number
Previous element sort
- Sort value of the previous element in the new table
- Optional
- number
Next element sort
- Sort value of next element in the new table
- Optional
- number
Title of the sort field
- Title of sort field in data
- Optional
- number
Example of tables
Troubleshooting
Note: In Firefox, the handle doesn't work on the icon. In order to avoid problems, you need to overlap the icon with a group and use the ID of this group as a handle.
Changelogs
Update: 21/08/21 - Version 1.3.0
- Added the ability to set the value of the sorting field while moving between bases.
Update: 12/04/22 - Version 1.6.0
- Fixed reading the order from the database
Update: 13/05/22 - Version 1.7.0
- Fixed "reorder rg" action
Update: 13/05/22 - Version 1.8.0
- Increased reorder speed loading
Update: 17/11/22 -
- Minor fixes
Update 17.11.22 - Version 1.9.0
- minor fixes