Todo List + Drag and Drop

A todo list with sortable items using LiVue directives.

How it works

The list is rendered from PHP state. Dragging items triggers the server method reorder($item, $position), which updates the array order and sends back the new UI.

Sort directive docs State docs

{{ todo.text }}

No tasks yet. Add one above!

app/LiVue/TodoList.php

public function reorder(
    string $item,
    int $position
): void
{
    $ids = array_column($this->todos, 'id');
    $index = array_search($item, $ids, true);

    if ($index === false) {
        return;
    }

    $moved = $this->todos[$index];
    array_splice($this->todos, $index, 1);
    array_splice($this->todos, $position, 0, [$moved]);
}

resources/views/livue/todo-list.blade.php

<ul v-sort="'reorder'">
    <li v-for="todo in todos"
        :key="todo.id"
        v-sort-item="todo.id">
        <span v-sort-handle>☰</span>
        <input v-sort-ignore type="checkbox"/>
    </li>
</ul>