https://github.com/amiranagram/livewire-sortablejs

A Livewire wrapper for SortableJS.
https://github.com/amiranagram/livewire-sortablejs

laravel livewire sortablejs

Last synced: 3 months ago
JSON representation

A Livewire wrapper for SortableJS.

• Host: GitHub
• URL: https://github.com/amiranagram/livewire-sortablejs
• Owner: amiranagram
• License: other
• Created: 2021-05-31T09:41:27.000Z (over 3 years ago)
• Default Branch: 0.x.x
• Last Pushed: 2021-07-06T20:07:38.000Z (over 3 years ago)
• Last Synced: 2024-10-10T13:08:26.009Z (4 months ago)
• Topics: laravel, livewire, sortablejs
• Language: JavaScript
• Homepage: https://livewire-sortablejs.amirrami.com
• Size: 467 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        
# Livewire SortableJS

A Livewire wrapper for [SortableJS](https://github.com/SortableJS/Sortable).

[![Latest Version on NPM](https://img.shields.io/npm/v/livewire-sortablejs.svg?style=flat-square)](https://npmjs.com/package/livewire-sortablejs)

[![GitHub Build Action Status](https://img.shields.io/github/workflow/status/amiranagram/livewire-sortablejs/Build%20assets?label=build&style=flat-square)](https://github.com/amiranagram/livewire-sortablejs/actions/workflows/build.yml?query=workflow%3Abuild+branch%3A0.x.x)

[![Total Downloads](https://img.shields.io/npm/dt/livewire-sortablejs.svg?style=flat-square)](https://npmjs.com/package/livewire-sortablejs)

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)

---

![](demo/assets/example-1.gif)

A simple list of tasks in your component view.

```html



    


        @foreach($tasks as $task)

            


                

                    


                        Task {{ $task->id }}

                    

                

            

        @endforeach

    



```


An update method in your component class.

```php

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

```html

```

### NPM

```bash

npm install livewire-sortablejs

```

or

```bash

yarn add livewire-sortablejs

```

Then import the package into your bundle:

```js

import 'livewire-sortablejs'

// or

require('livewire-sortablejs')

```

## Usage

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

## Contributing

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

## Security Vulnerabilities

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

## Credits

- [Amir Rami](https://github.com/amiranagram)

- [All Contributors](../../contributors)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.