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.

• 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.

Place repeating group on the page

Set it ID Attribute

Place plugin element to the page and set RG id in the first field

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

Toggle sortable

• Enable or disable drag-n-drop in RG

Refresh RG

• It Redraws the RG

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

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

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

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