Sort plugin: Return complete reordered list and not reordered item

[mynona]

It would be fantastic if the x-sort handler not only returns the item that was changed but the full reordered list.

Use case: you want to persist the sort order and therefore persist the order id of each element in the list.

[jyrkidn]

This is how I managed to do it:

<div
    x-sort
    x-sort:config="{
        animation: 100,
        store: {
            set: function (sortable) {
                let items = sortable.toArray().map((value, index) => {
                    return {
                        order: index + 1,
                        value: value,
                    };
                });

                $wire.updateItemOrder(items);
            },
        }
    }"
>
    <div
        x-sort:item
        data-id="1"
    >
        Item 1 
    </div>
    <div
        x-sort:item
        data-id="2"
    >
        Item 2
    </div>
</div>

Where $wire.updateItemOrder is a method in Livewire component, you can also do ajax call here.
See https://github.com/SortableJS/Sortable?tab=readme-ov-file#store for more info.

[Saeven]

Thanks for showing the config syntax, I wasn't sure how to approach that!