Plugins
Templates

Drag & Drop to Reorder RG

Link to the plugin page: https://zeroqode.com/plugin/drag--drop-to-reorder-rg-1624284188439x314009559960327230​

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

​

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

Title

Description

Type

Format

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

Title

Description

Toggle sortable

Enable or disable drag-n-drop in RG

Refresh RG

Redraw RG

​

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 element is failed to delete

Item moved

Is triggered when an element is moved inside of the RG

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

Return information if the element is enabled

yes/no

New Sort Of Item

Return 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

Title

Description

Type

Format

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

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.

Demo to preview the settings:

​