Livewire SortableJS

A Livewire wrapper for SortableJS.

---

A simple list of tasks in your component view.

1<div class="bg-white shadow overflow-hidden sm:rounded-md">
2    <ul 
3        wire:sortable="updateTaskOrder"
4        wire:sortable.animation="150"
5        class="divide-y divide-gray-200"
6    >
7        @foreach($tasks as $task)
8            <li wire:sortable.item="{{ $task->id }}">
9                <a href="#" class="block hover:bg-gray-50">
10                    <div class="flex items-center px-4 py-4 sm:px-6">
11                        Task {{ $task->id }}
12                    </div>
13                </a>
14            </li>
15        @endforeach
16    </ul>
17</div>

An update method in your component class.

1public $tasks;
2
3public function mount()
4{
5    $this->tasks = Task::orderBy('order')->get();
6}
7    
8public function updateTaskOrder($list)
9{
10    foreach($list as $item) {
11        Task::where('id', $item['value'])
12            ->update(['order' => $item['order']]);
13    }
14    
15    $this->tasks = Task::orderBy('order')->get();
16}

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

1<script src="https://cdn.jsdelivr.net/npm/livewire-sortablejs@0.x.x/dist/livewire-sortable.min.js"></script>

NPM

1npm install livewire-sortablejs

or

1yarn add livewire-sortablejs

Then import the package into your bundle:

1import 'livewire-sortablejs'
2// or
3require('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.