A plugin/wrapper around [Shopify's sortable package](https://github.com/Shopify/draggable/tree/master/src/Sortable). It makes implementing sortable interfaces super simple using Livewire.
npm install livewire-sortableA plugin/wrapper around Shopify's sortable package. It makes implementing sortable interfaces super simple using Livewire.
html
`$3
`
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, and wire:sortable.handle attributes to your markup as follows.`html
@foreach ($tasks as $task)
{{ $task->title }}
@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, and wire:sortable-group.item attributes to your markup as follows.`html
@foreach ($groups as $group)
{{ $group->label }}
@foreach ($group->tasks()->orderBy('order')->get() as $task)
{{ $task->title }}
@endforeach
@endforeach
``