logo

Drag & Drop to Reorder RG

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
Image without caption
Set it ID Attribute
Image without caption
Place plugin element to the page and set RG id in the first field
Image without caption
☝
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

Image without caption
Image without caption

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.
Image without caption
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
Image without caption
Image without caption

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.
Image without caption

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

Helpful?