Livewire Sortable

A plugin/wrapper around Shopify's sortable package. It makes implementing sortable interfaces super simple using Livewire.

Installation

CDN

NPM

npm install livewire-sortable --save-dev

Import the package in your bundle:

import 'livewire-sortable'
// Or.
require('livewire-sortable')

Usage

For simple layouts that only require simple sorting like a todo list, add the

wire:sortable

wire:sortable.item

wire:sortable.handle

@foreach ($tasks as $task)

• {{ $task->title }}

  Remove
@endforeach

For creating a nested layout with draggable groups with draggable items inside each group, similar to Trello, add the

wire:sortable

wire:sortable-group

wire:sortable.item

wire:sortable.handle

wire:sortable-group.item-group

wire:sortable-group.item

    @foreach ($groups as $group)
        

            

                
{{ $group->label }}

            <button wire:click="removeGroup({{ $group-&gt;id }})">Remove</button>
        </div>

        <ul wire:sortable-group.item-group="{{ $group-&gt;id }}">
            @foreach ($group-&gt;tasks()-&gt;orderBy('order')-&gt;get() as $task)
                <li wire:key="task-{{ $task-&gt;id }}" wire:sortable-group.item="{{ $task-&gt;id }}">
                    {{ $task-&gt;title }}
                    <button wire:click="removeTask({{ $task-&gt;id }})">Remove</button>
                </li>
            @endforeach
        </ul>

        <form wire:submit.prevent="addTask({{ $group-&gt;id }}, $event.target.title.value)">
            <input type="text" name="title">

            <button>Add Task</button>
        </form>
    </div>
@endforeach

<form wire:submit.prevent="addGroup">
    <input type="text" wire:model="newGroupLabel">

    <button>Add Task Group</button>
</form>

Styling

If you want to add your own styles to elements during various "draggable" states (like adding a shadow to an item while dragging), reference Shopify's Draggable/Sortable plugin's docs directly: https://github.com/Shopify/draggable/blob/58d79dc9fb5b82271c5dfec74a5c9207cfab01f5/src/Draggable/README.md#classes