95min

Drag & Drop to Reorder RG

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

Document image

Set it ID Attribute

Document image

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

Document image

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

Document image
Document image

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.

Document image

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

Document image
Document image

Troubleshooting

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.

Document image

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

Demo to preview the settings