Sortable RG - Drag & Drop

Demo to preview the settings

Introduction

Reorder repeating group list with drag and drop feature. Supports touch devices. All changes are saved in browser local storage.
Plugin features:
  • Supports touch devices and modern browsers
  • Smooth CSS animations when moving items
  • Control animation speed
  • Supports drag handles
  • Smart auto-scrolling
  • Tap and hold to drag (for touch devices)
  • You can swap or reorder items
  • Changes are saved to local storage so on page reload list will auto-order to the latest saved changes
  • Remove items from the database when dragging outside the box (if enabled in plugin settings)
  • Copy the reordered list to the new Database in the new order
  • Save reordered field list in DataBase when using a field list for repeating group
  • Save the RG order and reflect it to other pages/users (see demo or in the forum thread)
Follow the thread on the forum for the latest changes and discussions: https://forum.bubble.io/t/new-plugin-sortable-rg-drag-drop-by-ezcode/85730

Additional plugin features

  • Highlight drop area
  • Remove items from the database when dragging outside the box. To use this feature, enable the checkbox in the plugin settings and set the Database name that is used for the repeating group (See the example in our demo or below).
  • Custom drag handler. By default, you can drag from anywhere but you can use an icon for that, give an ID to it, and set this ID respective field in the plugin settings ("Move handler ID"), leave this field empty if it is not needed.
  • Save the RG order - the plugin has a state "RG new order" You can save the text from this state in your database and set it in the plugin's settings field "Initial order" on another page where the new order should be reflected. See an example on the demo page.

Plugin Elements Properties

This plugin has one visual element that can be used on the page: Reorder RG.

Reorder RG

Reorder a Repeating Group using drag and drop.
Image without caption

Element Fields

Title
Description
Type
Repeating group ID
The element ID is assigned to a repeating group.
text
Disabled
Disables the drag-and-drop feature.
Checkbox
Cursor type on drag
Allows to select the cursor type on drag.
Dropdown
Animation duration
The time for elements rearranging animation in milliseconds.
number
Drag handler ID
Allows to drag the RG elements using a helping element. The helping element should have a certain ID.
text (optional)
Drag handler Class
Allows to drag the RG elements using a helping element. The helping element should have a certain class.
text (optional)
Remove from DB mode
Allows to remove an element from the database when the element is dragging out of its side borders. For this feature need to expose data from the database via API.
Checkbox
Data base to remove from
Indicates the data type of RG data source. For this feature need to expose data from the database via API.
App Type (optional)
Drop area color
The color of the dropping area when an element is reordering.
Color (optional)
Chosen item color
The color of the dragging area when an element is reordering.
Color (optional)
Consider drag after
The distance in pixels that is considered that the element should be reordered. This setting is used for desktops only. For mobile use the “Long press to drag” field.
number (optional)
Initial order
Use it when you want to reorder this RG as it was reordered from another user or from another page. First, save the new order from the state "RG new order" when ordering it. Then put the new saved order in this field. The RG should be of the same type with the same amount of items loaded. See a detailed example on the forum or on the demo page.
text (optional)
Swap
Enables swapping from dragged element and element from dropping area.
Checkbox
Long press to drag
The time in milliseconds for tap before drag should start. This setting is used for mobile only. For desktop use the “Consider drag after” field.
number (optional)
Items Type
Used for state "Sorted things Items”.
App Type (optional)
List Of Items
Items used in your Repeating Group. Needed only if you are working with the "Sorted things Items" state.
list of Items Type (optional)
Force Fallback
Fixes the issue with random reordering on some apps (set to false for newly created apps).
Checkbox

Element Actions

1) Reset

2) Toggle disabled status

3) Copy sorted to new DB

4) Save sorted DB field list

5) Set new order

Element Events

Title
Description
Drag started
This event is triggered when a user starts to drag an element.
Drag ended
This event is triggered when a user ends to drag an element.
Element deleted
This event is triggered when the selected element will be deleted from the database. Will be triggered on the “Remove from DB mode” element field using.
Copying done
This event is triggered when all data was successfully copied to the new database. Will be triggered on “Copy sorted to new DB” element action using.
New order saved
This event is triggered when the new order was successfully saved to the database. Will be triggered on the “Save sorted DB field list” element action using.
State ready: Reordered Things IDs
This event is triggered when State, Reordered things IDs was updated and ready to use.
Rerodered Things List is Ready
This event is triggered when the list of things was reordered and the state with the result Sorted things Items will be ready.

Element States

Title
Description
Type
Sortable is enabled
Indicates if the sorting feature is enabled.
yes / no
Copying in progress
This state is to use with action Copy sorted to new DB. Indicates if the copying is still in progress.
yes / no
Copying process percentage
This state is to use with action Copy sorted to new DB. Indicates the status of the copying process in percentage.
number
Saving to DB is in progress
This state is to use in correlation with the action Save sorted DB field list. Indicates if saving data is in progress.
yes / no
RG new order
This state is to use in correlation with the Initial Order feature. This order text is in a format that is used in plugin logic, it does not contain elements IDs or indexes. It is used to be saved somewhere in your database and used later in a repeating group to set reorder things as they were saved. For example, the admin sets an order on his admin dashboard, saves the order, and on the user's page, this order is reflected in the user's repeating group.
text
Reordered things IDs
Contains a list of IDs in a new order after reordering things. Updates when an item is dropped. Sometimes it is not available instantly, so you can use this in correlation with the event State ready: Reordered Things IDs, this event is triggered when the state was updated and is ready to use.
list of texts
Cells Indexes in New order
Contains a list of sorted cells’ indexes.
list of numbers
Sorted things Items
Contains a list of sorted Items.
list of Items Type from element

Workflow example

How to use the "Drag handler ID" field

How to set “Highlight” feature

How to use the "Remove from DB mode" field

How to use the initial order feature

Changelogs