A plugin to bring drag/sort capability to Livewire
A plugin/wrapper around Shopify's sortable package. It makes implementing sortable interfaces super simple using Livewire.
npm install livewire-sortable --save-dev
Import the package in your bundle:
import 'livewire-sortable' // Or. require('livewire-sortable')
For simple layouts that only require simple sorting like a todo list, add the
wire:sortable,
wire:sortable.item, and
wire:sortable.handleattributes to your markup as follows.
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.itemattributes to your markup as follows.
@foreach ($groups as $group){{ $group->label }}
<button wire:click="removeGroup({{ $group->id }})">Remove</button> </div> <ul wire:sortable-group.item-group="{{ $group->id }}"> @foreach ($group->tasks()->orderBy('order')->get() as $task) <li wire:key="task-{{ $task->id }}" wire:sortable-group.item="{{ $task->id }}"> {{ $task->title }} <button wire:click="removeTask({{ $task->id }})">Remove</button> </li> @endforeach </ul> <form wire:submit.prevent="addTask({{ $group->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>
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