GCS Studios
Freedom and Flexibility
Create dynamic, flexible and reorderable layouts without complex workflows or layout restrictions.
Why use this?
Built for what Bubble does not cover.
Bubble has no native drag and drop. There is an official Bubble plugin, Draggable Elements, but a reorderable layout then takes several components nested in a precise structure, plus dozens of workflows, conditionals and custom states. It gets worse in a free layout like a dashboard or a widget panel, where the structure does not repeat itself as it does in a repeating group.
Styling is limited too, with almost no built-in animation, so that has to be rebuilt with conditionals and workarounds. And reading the resulting order back is hard work, while keeping it persisted between sessions burns through workload units (WUs).
Key features 6
Automatic Detection
Draggable elements and drop areas are automatically recognized based on the structure.
Fully Customizable
Control animations, movement behavior, and interaction modes.
Real-Time Events
Triggers events on drag start, drop, and order change.
Cross-Device Compatibility
Works smoothly on both desktop and mobile devices.
Fast & Lightweight
Designed to run smoothly while avoiding WU consumption, depending on the save method.
In detail
Drag and Drop That Fits Your Layout
- Works on groups and on repeating groups, with static or dynamic lists
- Two swap modes: swap as you hover over a slot, or swap only when the element is dropped
- Drag locked to the x axis, to the y axis, or free on both
- Drag on hold, so a short click on the element still behaves as a click
- Auto-scroll while dragging near the edge of a scrollable area
- Draggable elements and drop areas detected automatically, with no setup per item
Order You Can Save and Restore
- Automatic or manual saving, so the order can be written when you decide
- Three correlation modes (general, individual and inherited) for how the saved order is matched back to the list
- The current order exposed as a state, ready to be stored in the database
- Set order action to apply an order you already have, from any workflow
Fully Customizable
- Three animation types: dynamic, spring, or none at all
- Drop area highlight with its own background color, border style, width and color
- Border radius of the slot and opacity of the element while it is being dragged
- 10+ properties, grouped in sections inside the element panel
Workflow Friendly
- Five events: swap started, swap ended, order changed, invalid order and initialized
- Order changed and current order exposed as states for conditionals and workflows
- Set order and Reload actions that can be triggered from anywhere
- Swapeasy Sentinel, an add-on element that watches a repeating group for structural changes and fires a loaded event, so the target Swapeasy can be reloaded when the list changes
Reliable & Production-Ready
- Built with lightweight CSS and JavaScript for fast, reliable performance
- Designed around practical use cases and real Bubble development needs
- Tested in real-world applications before being released publicly
- Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer
How to use 4
-
01
Enable the option to set an ID
In the Bubble editor, go to the tab "Settings > General > Advanced options" and check the box "Expose the option to add an ID attribute to HTML elements".
-
02
Identify the target element
Build the required basic structure (container, drop areas, and draggable elements) according to your use case and set an unique ID for the container element.
To prevent compatibility issues, avoid starting IDs with numbers or symbols. Start with letters and use hyphens or underscores if needed.
-
03
Insert the plugin element anywhere on the page
Insert the plugin element anywhere on the page and ensure it is always visible.
In Bubble, any element-type plugin must be visible to work properly.
-
04
Provide the ID and set the plugin properties as desired
In the plugin element, provide the ID assigned to the target element (in step 2) and set the other plugin properties according to your needs. If the selected saving method is manual, check the step-by-step instructions in the documentation to configure it correctly.
The structure Swapeasy expects
Swapeasy does not build the layout, it drives the one you build in Bubble. There are two possible structures and the right one depends on the use case. The only rule they share: the ID goes on the main container, and on nothing else.
Free layout
For an arrangement that does not repeat, such as a dashboard or a panel of widgets, where every position is its own element.
- Container (Group)
- Drop area (Group)
- Draggable element (any element)
- Container Group
- The main container must be a common Group, because this structure is meant to accept any arrangement of the elements inside it. This is the element that carries the ID.
- Drop area Group
- Each drop area must be a common Group. It holds one draggable element and also serves as the landing place for any other draggable element in the structure. Each drop area holds exactly one draggable element, and every draggable element sits inside a drop area.
- Draggable element any element
- The element that is actually dragged, in both structures. It can be a Group, when it has to carry other elements inside it, and then the element and all of its content are dragged together. Or it can be any other single element, such as a Button, a Text or an Input, when it carries nothing of its own, like a button in a menu.
List of items
For a static or dynamic list, such as a menu, where the Repeating Group already repeats the cell for you.
- Container (Repeating Group)
- Draggable element (any element)
- Container Repeating Group
- The main container must be a Repeating Group, because this structure is meant to handle a static or dynamic list of items, such as a menu. This is the element that carries the ID.
- Drop area not needed
- There is no drop area to build here. The Repeating Group's own cell plays that part, so the draggable element goes straight inside the cell.
- Draggable element any element
- The element that is actually dragged, in both structures. It can be a Group, when it has to carry other elements inside it, and then the element and all of its content are dragged together. Or it can be any other single element, such as a Button, a Text or an Input, when it carries nothing of its own, like a button in a menu.
Swapeasy is an element-type plugin, so the plugin element and the target container have to be visible at the same time, both when the page loads and whenever the container is shown later. While one is visible and the other is hidden, the plugin cannot recognize the container, in either direction. When visibility is conditional, for example a container shown only on desktop, repeat the same conditions on the plugin element, or put both inside the same group so they are always shown and hidden together.
When keeping both visible together is not possible, because the container is born hidden or is only shown much later, use the Reload action right after it becomes visible: Reload remaps the structure inside the container and applies the current order.
TARGET ELEMENT 1
The properties below set the behaviour, not the structure. Swapeasy accepts two different structures, a free layout and a list, and which elements you need changes between them: see The structure Swapeasy expects, right after How to use.
Element ID
Provide the ID that was assigned to the target element (the main container, which will contain all the required structure).
The ID goes on the main container and on nothing else, and which element that is depends on the structure: a common Group for a free layout, a Repeating Group for a list. See The structure Swapeasy expects.
DRAG AND DROP 6
Swap enabled?
Enables or disables the drag and swap interaction.
Swap mode
Sets when two elements swap places: as soon as the dragged element hovers a drop area, or only when it is dropped.
Animation type
Sets the type of animation when dragging and swapping elements: dynamic is smooth, spring is elastic, none is instantaneous.
Drag on hold?
By default the dragging action starts as soon as the element is clicked/touched, but when enabling this property the dragging action will require clicking/touching and holding for a moment to start. Useful mainly on touch interfaces, such as cell phones and tablets, it reinforces security by preventing accidental movements.
Drag axis
Sets the direction of movement, restricting the dragging interaction to a specific axis: vertical, horizontal, or both.
Auto-scroll on drag?
Enables automatic scrolling in the main container when an element is dragged over a long list that requires scrolling.
SAVE 1
Save method
Sets how Swapeasy handles order storage and persistence: automatic does it for you, manual leaves it to your workflows.
The two methods trade one cost for the other. Automatic saves on the user's device, so it costs no Workload Units, and the restored order does not travel between devices. Manual can cost Workload Units when the order goes to the database, and in exchange the same order comes back on any device.
CUSTOM STYLES 7
General
Border radius correlation
Sets the relationship between the border radius of the drop area and the draggable element.
While a swap is still in progress, the border radius of the elements can be briefly affected. It returns to normal as soon as the draggable element is dropped, and the fix is planned for a future version.
Border radius
If border radius correlation is set to "general", this value sets a default border radius for all drop areas and draggable elements.
Drop area (highlighted)
Background color
Sets the background color of the currently hovered drop area (while an element is being dragged).
Border style
Sets the border style of the currently hovered drop area (while an element is being dragged).
Border width
Sets the border width (in pixels) of the currently hovered drop area (while an element is being dragged).
Set a transparent border of the same width on the drop area in its normal state. Without it, the element grows by the border width the moment it is hovered and the layout jitters, because the border is being added to an element that had none.
Border color
Sets the border color of the currently hovered drop area (while an element is being dragged).
Draggable element (while being dragged)
Opacity
Sets the opacity of the element currently being dragged.
States 2
Values the element exposes for the rest of the page to read.
order changed
Evaluates whether the order has been changed after the draggable element is dropped (yes/no).
current order
Returns the current order value (numeric string) whenever a position swap is completed or initially set (E.g.: 1,2,3,4).
Events 5
Where a workflow can start.
swap started
Event that can be triggered when an element starts to be dragged.
swap ended
Event that can be triggered when the element being dragged is dropped.
order changed
Event that can be triggered when a swap occurs and the current order is different from the previous one. Use this event to trigger actions to save the new order.
invalid order
Event that can be triggered when the order provided in the element or action does not have the correct format or the number of items (numeric elements in the string) does not correspond to the structure within the main container.
initialized
Event that can be triggered when Swapeasy is initialized.
Actions 2
What a workflow can tell the element to do.
With the manual save method three pieces work together: the Order changed event says when the order changed, the Current order state carries the value to store as text, and Set order applies a stored order back, which is best triggered by the Initialized event. Set order also works on its own, to apply a different order by condition, such as one arrangement above 576px and another below it. When no order is ever applied, the elements start in the structural sequence they have in the editor.
Set order 1 param
Sets the item order based on a provided numeric string.
Order to be applied
The value of this field must be a valid string (numbers separated by comma) and must correspond to the number of draggable elements in the created structure (E.g.: 1,2,3,4).
Reload no params
Remaps the structure and applies the corresponding item order.
Use it when the structure inside the main container is not the one Swapeasy read at initialization. Three cases: a new record in a Repeating Group fed by a data type; a container that was hidden when the page loaded and is shown later; and a container whose contents your workflows rebuilt. Trigger Reload after the change and Swapeasy remaps the structure and applies the current order. For the first case there is NWD - Swapeasy Sentinel, the second element in this plugin: place it inside the Repeating Group and use its Loaded event to trigger Reload.
Events 1
Where a workflow can start.
loaded
Event that can be triggered when the element is loaded.
FAQ 7
Is any specific or advanced knowledge required to use the plugin?
No. Swapeasy was designed to be easy to implement. Just follow the step-by-step instructions in the documentation and choose the structure that best fits your use case.
Does the plugin support mobile devices?
Yes. Drag actions are automatically mapped to touch interactions on mobile devices. For a better mobile experience and to avoid accidental dragging, we recommend enabling the Drag on hold option. This ensures the drag action only starts after pressing and holding the element for a few milliseconds.
Is it possible to use lists as a data source?
Yes. Swapeasy now supports static lists (Option Sets, text, number, date, etc.) or dynamic lists. But it does not yet support nested lists. Nested lists will be supported in a future version (under development).
When should you use Swapeasy with groups or repeating groups?
This depends on your layout and data structure. Both approaches are supported, and the best choice varies by use case. For more details, see the note at the top of the Target element section.
Is it necessary to set IDs for all elements of the structure?
No. You only need to assign a unique ID to the main container. All other elements follow the defined structure automatically. For more details, see the note at the top of the Target element section.
Even after everything is set up, it is still not possible to drag and drop the elements?
Make sure the plugin element is visible on the page, which is required for it to work. Then verify that the Swap enabled property is turned on, that the main container ID matches the ID set in the plugin, that the ID is valid and does not start with a number, and that each drop area, when your layout uses them, contains only one draggable element.
Are the order saving or restoring settings not working?
Review the Save section to ensure order saving and restoring are configured correctly.
NWD UI - Enhancer
This plugin is maintained by GCS Studios and is part of the NWD UI - Enhancer family, plugins that add behavior an element did not have, without replacing it. Each one attaches to something already on your page, such as a group, a popup, a repeating group, a button or an input, and changes how it responds, with no layout to redo, and is tested in real applications before release. See more plugins on the GCS Studios contributor page.