Livewire sortable group function

#1

This is probably a huge newb question, but I can’t seem to find any tutorials or examples for how to write out the livewire public function to make the group thing work. Any links to a guide would be much appreciated as well :slight_smile:

In this documentation https://github.com/livewire/sortable there is only an example of the blade view. I was able to find how to make the sortable work in some demos for a single item.

To drag around the order of some subtasks, I did this. Since only one column value needs to be changed, I kinda understand this eloquent query… I am really lost on how this is supposed to work to drag and drop cards between columns like on trello.

public function updateCardTaskOrder($cardtasks)
    {
        foreach($cardtasks as $cardtask) {
            Cardtask::find($cardtask['value'])->update(['order' => $cardtask['order']]);
        }

        $this->cardtasks = Cardtask::where('card_id', $this->card_id)
            ->orderBy('order', 'ASC')
            ->get();
    
    }

Q1. How would I change the public function to update the order along with the column_id?

Q2. I think I setup the group thing right?

<div wire:sortable="updateColumnOrder" wire:sortable-column="updateTaskOrder">
    @foreach ($columns as $column)
        <div wire:key="column-{{ $column->id }}" wire:sortable.item="{{ $column->id }}">

            <ul wire:sortable-column.item-column="{{ $column->id }}">
                @foreach ($tasks as $task)
                    <li wire:key="task-{{ $task->id }}" wire:sortable-column.item="{{ $task->id }}">
                          // Show card stuff
                    </li>
                @endforeach
            </ul>
            
        </div>
    @endforeach
</div>

enter image description here

Any advice in general is much appreciated regarding this :slight_smile: