Reorderable List

Overview

Reorderable List allows users to drag items to reorder them within a horizontal or vertical layout. It supports layout groups, spacing, alignment, animated repositioning, scaling and fading during drag, and event callbacks when the list order changes.

Usage

Add Reorderable List component to a parent RectTransform

Add child UI elements under it

Optionally add Horizontal Layout Group or Vertical Layout Group

Start dragging the objects!

Properties

Settings

Name	Type	Description
`instantSnap`	`bool`	If true, items snap instantly instead of animating
`itemSpacing`	`float`	Spacing between items when no layout group exists
`animationDuration`	`float`	Duration for all movement animations
`animationCurve`	`AnimationCurve`	Controls easing used in animations

Drag Settings

Name	Type	Description
`dragAlpha`	`float`	Alpha applied to the dragged item
`dragScale`	`float`	Scale multiplier for the dragged item

References

Name	Type	Description
`listContainer`	`RectTransform`	Parent container of the items
`canvas`	`Canvas`	Used for screen to local conversions

Events

Event	Description
`onOrderChanged`	Called when an item is dropped into a new position

Public Methods

Name	Parameters	Description
`RefreshItemsList()`	None	Rebuilds the internal item list and initializes items
`RefreshLayout()`	None	Forces items to snap or animate to proper positions

Code Example

ReorderableListExample.cs

using UnityEngine;
using Evo.UI;

public class ReorderableListExample : MonoBehaviour
{
    public ReorderableList reorderable;

    void Start()
    {
        // Enable smooth animation when rearranging
        reorderable.instantSnap = false;

        // Customize spacing (if no layout group)
        reorderable.itemSpacing = 12f;

        // Drag visuals
        reorderable.dragAlpha = 0.8f;
        reorderable.dragScale = 1.15f;

        // Animation settings
        reorderable.animationDuration = 0.25f;
        reorderable.animationCurve = AnimationCurve.EaseInOut(0, 0, 1, 1);

        // Listen to order changes
        reorderable.onOrderChanged.AddListener(OnListOrderChanged);

        // Ensure items are initialized
        reorderable.RefreshItemsList();
    }

    void OnListOrderChanged(ReorderableListItem item, int oldIndex, int newIndex)
    {
        Debug.Log("Item moved from " + oldIndex + " to " + newIndex);
    }
}

On this page