livewire-sortablejs

    0.1.1 • Public • Published

    Livewire SortableJS

    A Livewire wrapper for SortableJS.

    Latest Version on NPM GitHub Build Action Status Total Downloads Software License


    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

    Buy Me A Coffee

    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

    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

    License

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

    Install

    npm i livewire-sortablejs

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    357 kB

    Total Files

    9

    Last publish

    Collaborators

    • amirami