Element fields

Plugin element fields and their meaning

Repeating group ID

First off, your repeating group should have an ID. Set a unique ID to your repeating group and paste it in this field.

See here, how to add an ID to any element.

Disabled

Will disable drag and drop feature. You can turn it back on using the action Toggle disabled status

Cursor type on drag

You can change the cursor type that will be changed to when dragging an element. Will be set back to default when drag event finishes.

Animation duration

Elements rearranging animation in milliseconds.

Drag handler ID & Drag handler Class name

Optional fields - leave empty if you don't need it.

Meaning

You can drag elements using, for example, an icon. To use the ID of that icon, use the handler ID field, to use class name, use the handler Class field.

Example

Remove from DB mode and Data base to remove from

Meaning

When dragging an element of repeating group out of its side borders, the element will be removed from database by its ID. In order it to work, you should indicate the database where the element is located to be removed from. It should be the same data base as is used for repeating group data source. After item deletion, an event called "Element deleted" will be triggered.

Example

Repeating Group data source

Same data base as in Repeating Group

710KB

Screen Recording 2020-11-16 at 17.17.04.mov

Video example

Prepare DataBase API

In order it to work you have setup your app to expose data via API, and add Privacy rules to your database.

See here how to do it.

Drop area Color

When reordering an elements, the dropping area can be highlighted by changing the background Color with a Color that you choose here.

Chosen item Color

When dragging an element, the background of it can be highlighted with a Color you choose here. It will be active until the element will be dropped.

Consider drag after

Specify in pixels, how far the mouse should move before it's considered as a drag and then the elements will start to reorder. By default it is set to 1 pixel. This field is used for desktop use only and will be ignored on mobile devices. For mobile use, see the field Long press to drag

Long press to drag

This field is for mobile devices and will be ignored on desktop. Set in milliseconds how long you should tap and hold before drag starts. Be default it is set to 100 milliseconds.

Initial order

Meaning

Optional field - If you are not using this feature, leave this field empty. More detailed info on how to use this feature, see in the separate page, Initial Order - Feature. When in use, this field should contain a text type (that you previously saved from plugin state RG new order) from database.

In order it to work you have setup your app do expose data via API, and add Privacy rules to your database.

See here how to enable API and add Privacy rules.

Example

For more examples and explanations, see the Initial Order - Feature page.

Swap mode

Meaning

Reordering feature can be of two types. Default and Swap. By default when you drag an item, other elements above, or bellow are moving up or down to fit dropped element. In swap mode, the dragged item is switched with item where it is dropped, other elements remains in the same order.

Example

Default mode

Default

Swap mode

Swap