Swapeasy - Drag and Drop Group / RG

Key features 6

Freedom and Flexibility

Create dynamic, flexible and reorderable layouts without complex workflows or layout restrictions.

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 reordering for groups and repeating groups
Automatic detection of draggable elements and drop areas
It works with a free layout and with both static and dynamic lists
Supports persistent order saving and restoring
Real-time events for drag and drop actions and order changes
Customizable animations, movement direction, and behavior
Fully compatible with desktop and mobile devices

Fields 1

Element ID

text

Provide the ID that was assigned to the target element (the main container, which will contain all the required structure).

defaultno default

GENERAL SETTINGS 6

Swap enabled?

yes/no

Enables or disables the drag and swap interaction.

defaultyes

Swap mode

The default behavior is to swap elements as soon as you hover the dragging element on any drop area, but you can change that to make them swap when you drop the element.

hover
drop

defaulthover

Animation type

Sets the type of animation when dragging and swapping elements. Dynamic: swap with smooth transition effect. Spring: swap with elastic transition effect. None: instantaneous swap, no transition effect.

dynamic
spring
none

defaultdynamic

Drag on hold?

yes/no

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.

defaultno

Drag axis

Sets the direction of movement, restricting the dragging interaction to a specific axis: vertical, horizontal, or both.

x
y
both

defaultboth

Auto-scroll on drag?

yes/no

Enables automatic scrolling in the main container when an element is dragged over a long list that requires scrolling.

defaultyes

SAVE SETTINGS 1

Save method

Sets the save method that Swapeasy should use to handle order storage and persistence. If set to "automatic" Swapeasy will manage everything automatically, saving the order on each new change and restoring the order on each initialization to make it persist. If set to "manual", the order saving and restoring actions must be configured manually.

automatic
manual

defaultautomatic

CUSTOM STYLES 7

General

Border radius correlation

Sets the relationship between the border radius of the drop area and the draggable element.

general
individual
inherited

defaultindividual

Border radius

number

If border radius correlation is set to "general", this value sets a default border radius for all drop areas and draggable elements.

default0

optional

Drop area (highlighted)

Background color

color

Sets the background color of the currently hovered drop area (while an element is being dragged).

default#EEEEEE

Border style

Sets the border style of the currently hovered drop area (while an element is being dragged).

none
hidden
solid
dotted
dashed
double
groove
ridge
inset
outset

defaultnone

Border width

number

Sets the border width (in pixels) of the currently hovered drop area (while an element is being dragged).

default0

Border color

color

Sets the border color of the currently hovered drop area (while an element is being dragged).

default#EEEEEE

Draggable element (while being dragged)

Opacity

Sets the opacity of the element currently being dragged.

20%
40%
60%
80%
100%

default100%

States 2

Values the element exposes for the rest of the page to read.

order changed

yes/no

Evaluates whether the order has been changed after the draggable element is dropped (yes/no).

current order

text

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

Event that can be triggered when an element starts to be dragged.

swap ended

event

Event that can be triggered when the element being dragged is dropped.

order changed

event

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

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

Event that can be triggered when Swapeasy is initialized.

Actions 2

What a workflow can tell the element to do.

Set order 1 param

Sets the item order based on a provided numeric string.

Order to be applied

text

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).

defaultno default

Reload no params

Remaps the structure and applies the corresponding item order.

Events 1

Where a workflow can start.

loaded

event

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 Structure Settings section in the documentation.

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 Structure Settings section in the documentation.

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 Settings section to ensure order saving and restoring are configured correctly.