item-list.blade.php

/**
 * In your Livewire blade for the list of items
 */

<ul wire:sortable="saveOrderChange">
    @foreach($this->list as $item)
        <li
            wire:sortable.item="{{ $item->id }}"
            wire:key="{{ $item->id }}"
        >
          Content here
        </li>
    @endforeach
</ul>

ItemList.php

<?php
/**
 * In your Livewire model for the list of items
 */

class ItemList extends Component
{

    // rest of component

    public function saveOrderChange($sortableEvent)
    {   
        // Convert the sortable event into an array of positions for the setNewOrder function
        $order = array_map(function ($item) {
            return intval($item['value']);
        }, $sortableEvent);

        // probably a better way to do this, but this was my in 2 mins solution and I haven't gotten back to it yet
        $this->list->items()->first()->setNewOrder($order);
    }

}

I did as it follows:

$order = Arr::pluck($sortableEvent, 'value');

Model::setNewOrder($order);

:-)

@danieljpalmer Thanks very much for the gist! How did you manage to keep the width of your element when dragging it? (The mirror item) I saw in the preview that yours stays the same but for me it loses the width when its being dragged.