Need help with sortable?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

livewire
171 Stars 15 Forks 16 Commits 14 Opened issues

Description

A plugin to bring drag/sort capability to Livewire

Services available

!
?

Need anything else?

Contributors list

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
, and
wire:sortable.handle
attributes to your markup as follows.
    @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
, and
wire:sortable-group.item
attributes to your markup as follows.
@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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.