Livewire / sortable

#1

How should like be method updateTaskOrder for lw sortable plugin?

In docs only the frontend is presented.

Suppose we have columns (id, title, order) in a tasks table.

<ul wire:sortable="updateTaskOrder">
    @foreach ($tasks as $task)
        <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
            <h4 wire:sortable.handle>{{ $task->title }}</h4>
            <button wire:click="removeTask({{ $task->id }})">Remove</button>
        </li>
    @endforeach
</ul>
#2

Hi Ivan,

I just figured it out myself.
The updateTaskOrder method (or whatever name you give it) should be declared in your Livewire component class and it receives one argument, an array holding array’s of all the sortable elements with their, in this example: $task->id and the new order.

My personal usecase:

    public function updateImageOrder($images)

    {

        foreach ($images as $image) {

            if (is_int($image['order']) && ctype_digit($image['value'])) {

                $this->chalet->images->where('id', $image['value'])->first()->update(['rank' => $image['order']]);

            }

        }

        $this->chalet->refresh();

    }

Hope this helps! It’s very easy (-:

2 Likes
#3

In the meantime, I did.
I used this method…
Thank you.

public function updateItemOrder($list)
    {
        foreach($list as $item) {
            Item::find($item['value'])->update(['order' => $item['order']]);
        }
    }