# Element fields

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

{% hint style="info" %}
See [here](https://docs.ezcodeplugins.com/how-to-set-an-id), how to add an ID to any element.
{% endhint %}

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

{% tabs %}
{% tab title="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.
{% endtab %}

{% tab title="Example" %}
![](/files/-MMGXN5OWB7HLAnX0HC1)

![](/files/-MMGXN5GKnMybZ5-xsjd)
{% endtab %}
{% endtabs %}

### Remove from DB mode and Data base to remove from

{% tabs %}
{% tab title="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.
{% endtab %}

{% tab title="Example" %}
![Repeating Group data source](/files/-MMGc5tfTWHNMAaOrq8X)

![Same data base as in Repeating Group](/files/-MMGcBez8Chxs3xrL_fw)

{% file src="/files/-MMGeXLh2raQ\_HolnrC1" %}
Video example
{% endfile %}
{% endtab %}

{% tab title="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.

{% hint style="info" %}
See [here](https://docs.ezcodeplugins.com/enable-database-api) how to do it.
{% endhint %}
{% endtab %}
{% endtabs %}

### 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

{% tabs %}
{% tab title="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.

{% hint style="info" %}
See [here](https://ezcodeco.gitbook.io/general/enable-database-api/) how to enable API and add Privacy rules.
{% endhint %}
{% endtab %}

{% tab title="Example" %}
For more examples and explanations, see the *Initial Order - Feature page*.
{% endtab %}
{% endtabs %}

###  **Swap mode**

{% tabs %}
{% tab title="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.
{% endtab %}

{% tab title="Example" %}
Default mode

![Default](/files/-MMGuf_w1D4EGZBpT4jN)

Swap mode

![Swap](/files/-MMGvHbtITV7ZIF4S01m)
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ezcodeco.gitbook.io/sortable-rg/element-fields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.