Usage Instructions (EN) Setting Up the Target and Restriction Area

Set the "Element ID" field with the ID of the element to be draggable.
Set the "Restrict Area ID" field with the ID of the area that will restrict the element's movement.
Margin Customization

Use the "Initial Margin X" and "Initial Margin Y" fields to adjust the element's initial position in percentages.
If left empty, the element will respect the parent element's initial position.
Custom Dimensions

Configure the "Width" and "Height" fields to set dimensions in percentages.
If left empty, the element's original dimensions will be maintained.
Enable or Disable Movement

Use the "Draggable Element?" field to allow (true) or block (false) the element's movement.
Results

The element's final positions are published to the "output_x" (horizontal position) and "output_y" (vertical position) states.
A custom event target_group_dragged is triggered at the end of each drag.
------------------------------------------

Instruções de Uso (BR)
Configuração do Alvo e Área de Restrição

Defina o campo "Element ID" com o ID do elemento que será arrastável.
Defina o campo "Restrict Area ID" com o ID da área que limitará o movimento do elemento.
Personalização de Margens

Utilize os campos "Initial Margin X" e "Initial Margin Y" para ajustar a posição inicial do elemento em porcentagem.
Caso deixados vazios, o elemento respeitará a posição inicial do elemento pai.
Dimensões Personalizadas

Configure os campos "Width" e "Height" para definir dimensões em porcentagem.
Se deixados vazios, as dimensões originais do elemento serão mantidas.
Ativar ou Desativar Movimentação

Use o campo "Draggable Element?" para permitir (true) ou bloquear (false) a movimentação do elemento.
Resultados

As posições finais do elemento são publicadas nos estados "output_x" (posição horizontal) e "output_y" (posição vertical).
Um evento personalizado target_group_dragged é disparado ao final de cada arrasto.