Before start

Order of several Accordion component within the same container can be reordered by simply setting CanDrag parameter to true value. If set, dragging handles will appear beside the header title.

<Accordion HeaderText="Layers" CanDrag="true">
    content
</Accordion>

It is required that the container (e.g. div, article etc.) has display: flex and flex-direction: column (vertical layout) set.

<div style="display: flex; flex-direction: column">
    
</div>

Now Accordion components can be placed inside this container element.

<div style="display: flex; flex-direction: column">
    <Accordion HeaderText="Settings" CanDrag="true">
        <!-- content -->
    </Accordion>

    <Accordion HeaderText="Layers" CanDrag="true">
        <!-- content -->       
    </Accordion>

    <Accordion HeaderText="Info" CanDrag="true">
        <!-- content -->        
    </Accordion>
</div>

Order parameter

For Accordion component to know its position inside the container element, it is required to have Order parameter set. It is required that each Accordion have different value set inside the same parent element.

It is then developer's responsibility to implement OnOrderChanged event and save the component to desired place in the code (save the state).

If there are just less than 3 Accordion components that are rearranged, having few simple int variables can do the job. If there are more components where we need to save layout in some more persistent manner, a list can be used:

List<int> position = [2, 1, 3, 4, 5];

Then every Accordion component shall have own different position assigned:

<Accordion Order="position[0]" HeaderText="Title 1" CanDrag="true" OnOrderChange="HandleOrderChange">
    content
</Accordion>
<Accordion Order="position[1]" HeaderText="Title 2" CanDrag="true" OnOrderChange="HandleOrderChange">
    content
</Accordion>
<Accordion Order="position[2]" HeaderText="Title 3" CanDrag="true" OnOrderChange="HandleOrderChange">
    content
</Accordion>

Finalisation

At the end it's necessary that positions in the list are updated upon reordering. For this purpose OnOrderChanged event callback can be used. In this case it is just necessary that all Accordion components have this event connected to the same code.

void HandleOrderChanged((int oldOrder, int newOrder) args)
{
    var indexOld = position.IndexOf(args.oldOrder);
    var indexNew = position.IndexOf(args.newOrder);
    if (indexOld == -1 || indexNew == -1)
        return;
    position[indexOld] = args.newOrder;
    position[indexNew] = args.oldOrder;
}

This list can be now easily saved into some more persistent state, and the UI can be loaded at any time.