Package Exports

livewire-sortablejs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (livewire-sortablejs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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/livewire-sortablejs@0.x.x/dist/livewire-sortable.min.js"></script>

NPM

npm install livewire-sortablejs

yarn add livewire-sortablejs

Then import the package into your bundle:

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

JSPM