Livewire SortableJS

A Livewire wrapper for SortableJS.

A simple list of tasks in your component view.

<div class="bg-white shadow overflow-hidden sm:rounded-md">
    <ul 
        wire:sortable="updateTaskOrder"
        wire:sortable.animation="150"
        class="divide-y divide-gray-200"
    >
        @foreach($tasks as $task)
            <li wire:sortable.item="{{ $task->id }}">
                <a href="#" class="block hover:bg-gray-50">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                        Task {{ $task->id }}
                    </div>
                </a>
            </li>
        @endforeach
    </ul>
</div>

An update method in your component class.

public $tasks;

public function mount()
{
    $this->tasks = Task::orderBy('order')->get();
}
    
public function updateTaskOrder($list)
{
    foreach($list as $item) {
        Task::where('id', $item['value'])
            ->update(['order' => $item['order']]);
    }
    
    $this->tasks = Task::orderBy('order')->get();
}

Support me

I invest a lot of time writing quality software, what open-source market deserves.

Where I live I'm currently unable to apply for GitHub sponsorship. I was able to set up a Buy Me a Coffee account though. That's where you can show appreciation for my dedicated time to writing this package.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/livewire-sortable.min.js"></script>

NPM

npm install livewire-sortablejs

or

yarn add livewire-sortablejs

Then import the package into your bundle:

import 'livewire-sortablejs'
// or
require('livewire-sortablejs')

Usage

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Amir Rami
• All Contributors

License

The MIT License (MIT). Please see License File for more information.