Drag & Drop to Reorder RG Mobile

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-09.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Drag %26 Drop to Reorder RG

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-09&plugin=1768407173379x527913613954121700_current&tab=Design&name=Drag+%26+Drop+to+Reorder+RG&type=page&version=live

Introduction

This lightweight plugin makes it easy to add drag-and-drop functionality to repeating groups. It allows you to embed a fully sortable repeating group where individual cells can be rearranged intuitively by dragging and dropping them into place. The plugin supports both swap and handle modes, giving you flexibility in how users interact with items—whether they can drag anywhere within a cell or only from a designated handle. Designed to be simple to implement and efficient in performance, this plugin helps you create dynamic, user-friendly interfaces without added complexity.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at:

https://testflight.apple.com/join/j73hHPR6

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Step 1 – Install the Plugin

Step 2 – Add the Plugin Element to Your Page

Step 3 – Configure Properties

Plugin Element - Review Snippet

This element enables websites to display user ratings, review counts, and reviewer information directly within search results.structured data markup that enables websites to display user ratings, review counts, and reviewer information directly within search results.

Title	Description	Type
Items	Comma-separated items to display in the RG	Text, Required
Item Height	Height for each item (vertical layout). Used for hit-testing and spacing math.	Number, Required
Item Width	Width for each item (horizontal layout / grid).	Number, Optional
Layout Direction	Controls whether the list is vertical, horizontal, or grid-based.	Dropdown
Swap Behavior	Reorder: item inserts and shifts others. Swap: dragged and target exchange positions.	Dropdown
Swap Trigger	If handle_only, drag starts only from a “handle” area.	Dropdown
Enable Reorder	Turn drag-reordering on/off dynamically.	Yes/No, Required
Enable Scaling	Enables scaling the dragged item	Yes/No, Required
Enable Placeholder	Enable Visual helper: shows “empty slot” where dragged item came from / will land.	Yes/No, Required
Shadow Color	The color of the dragged item shadow	Color
Shadow Opacity	The opacity of the dragged item shadow	Number, Optional
Dragged Item Opacity	The opacity of the dragged item background	Number, Optional

Title	Description	Type
Reordered List	Comma-separated list reflecting current order.	Text
Dragged Item	The text/identifier of the dragged item.	Text
Old Index	The old index position of the moved item	Number
New Index	The new index position of the moved item	Number
Is Dragging	Indicates if an item is being dragged	Yes/No
Item Count	Total number of items.	Number

Name	Description
Drag Started	Triggered when drag interaction begins
Drag Ended	Triggered when the drag ended
Item Moved	Triggered when and item position is changed
Order Changed	Triggered when the order of items changes
Item Added	Triggered when an item is added
Item Deleted	Triggered when an item is deleted
Swap Performed	Triggered when items are swapped with positions

Title	Description	Type
Item	The item to add inside the RG	Text, Required

Title	Description	Type
Index	Index of the item to remove	Number, Required

Drag & Drop to Reorder RG Mobile

Demo to preview the plugin:

Introduction

Prerequisites

How to setup

Step 1 – Install the Plugin

Step 2 – Add the Plugin Element to Your Page

Step 3 – Configure Properties

Plugin Element - Review Snippet

Fields

Exposed States

Element Events

Element Actions

Workflow example

Add an item to the RG

Remove an item to the RG

Changelogs