{"id":16085678,"url":"https://github.com/amiranagram/livewire-sortablejs","last_synced_at":"2025-03-18T06:30:31.088Z","repository":{"id":50216957,"uuid":"372455500","full_name":"amiranagram/livewire-sortablejs","owner":"amiranagram","description":"A Livewire wrapper for SortableJS.","archived":false,"fork":false,"pushed_at":"2021-07-06T20:07:38.000Z","size":478,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"0.x.x","last_synced_at":"2025-02-28T07:49:28.418Z","etag":null,"topics":["laravel","livewire","sortablejs"],"latest_commit_sha":null,"homepage":"https://livewire-sortablejs.amirrami.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amiranagram.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null}},"created_at":"2021-05-31T09:41:27.000Z","updated_at":"2024-05-21T13:47:21.000Z","dependencies_parsed_at":"2022-09-24T08:40:12.712Z","dependency_job_id":null,"html_url":"https://github.com/amiranagram/livewire-sortablejs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-sortablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-sortablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-sortablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-sortablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amiranagram","download_url":"https://codeload.github.com/amiranagram/livewire-sortablejs/tar.gz/refs/heads/0.x.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243906271,"owners_count":20367001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel","livewire","sortablejs"],"created_at":"2024-10-09T13:08:43.557Z","updated_at":"2025-03-18T06:30:30.730Z","avatar_url":"https://github.com/amiranagram.png","language":"JavaScript","readme":"# Livewire SortableJS\n\nA Livewire wrapper for [SortableJS](https://github.com/SortableJS/Sortable).\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/livewire-sortablejs.svg?style=flat-square)](https://npmjs.com/package/livewire-sortablejs)\n[![GitHub Build Action Status](https://img.shields.io/github/workflow/status/amiranagram/livewire-sortablejs/Build%20assets?label=build\u0026style=flat-square)](https://github.com/amiranagram/livewire-sortablejs/actions/workflows/build.yml?query=workflow%3Abuild+branch%3A0.x.x)\n[![Total Downloads](https://img.shields.io/npm/dt/livewire-sortablejs.svg?style=flat-square)](https://npmjs.com/package/livewire-sortablejs)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n\n---\n\n![](demo/assets/example-1.gif)\n\nA simple list of tasks in your component view.\n\n```html\n\u003cdiv class=\"bg-white shadow overflow-hidden sm:rounded-md\"\u003e\n    \u003cul \n        wire:sortable=\"updateTaskOrder\"\n        wire:sortable.animation=\"150\"\n        class=\"divide-y divide-gray-200\"\n    \u003e\n        @foreach($tasks as $task)\n            \u003cli wire:sortable.item=\"{{ $task-\u003eid }}\"\u003e\n                \u003ca href=\"#\" class=\"block hover:bg-gray-50\"\u003e\n                    \u003cdiv class=\"flex items-center px-4 py-4 sm:px-6\"\u003e\n                        Task {{ $task-\u003eid }}\n                    \u003c/div\u003e\n                \u003c/a\u003e\n            \u003c/li\u003e\n        @endforeach\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nAn update method in your component class.\n\n```php\npublic $tasks;\n\npublic function mount()\n{\n    $this-\u003etasks = Task::orderBy('order')-\u003eget();\n}\n    \npublic function updateTaskOrder($list)\n{\n    foreach($list as $item) {\n        Task::where('id', $item['value'])\n            -\u003eupdate(['order' =\u003e $item['order']]);\n    }\n    \n    $this-\u003etasks = Task::orderBy('order')-\u003eget();\n}\n```\n\n## Support me\n\n\u003ca href=\"https://www.buymeacoffee.com/amirami\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n\nI invest a lot of time writing quality software, what open-source market deserves.\n\nWhere 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.\n\n## Installation\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/livewire-sortablejs@0.x.x/dist/livewire-sortable.min.js\" defer\u003e\u003c/script\u003e\n```\n\n### NPM\n\n```bash\nnpm install livewire-sortablejs\n```\n\nor\n\n```bash\nyarn add livewire-sortablejs\n```\n\nThen import the package into your bundle:\n\n```js\nimport 'livewire-sortablejs'\n// or\nrequire('livewire-sortablejs')\n```\n\n## Usage\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Amir Rami](https://github.com/amiranagram)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":["https://www.buymeacoffee.com/amirami"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famiranagram%2Flivewire-sortablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famiranagram%2Flivewire-sortablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famiranagram%2Flivewire-sortablejs/lists"}