{"id":15272451,"url":"https://github.com/wotzebra/livewire-sortablejs","last_synced_at":"2025-10-10T14:37:44.510Z","repository":{"id":38257887,"uuid":"397667524","full_name":"wotzebra/livewire-sortablejs","owner":"wotzebra","description":"A Laravel Livewire plugin that makes it easy to use Sortable.js","archived":false,"fork":false,"pushed_at":"2024-09-26T13:30:07.000Z","size":3493,"stargazers_count":306,"open_issues_count":12,"forks_count":26,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-31T19:01:49.894Z","etag":null,"topics":["laravel","laravel-livewire","livewire","sortable","sortablejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wotzebra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-18T16:28:30.000Z","updated_at":"2025-08-06T15:02:52.000Z","dependencies_parsed_at":"2024-09-28T09:41:13.320Z","dependency_job_id":"9450da26-4284-4d4c-b4ec-fddbb1eb81c4","html_url":"https://github.com/wotzebra/livewire-sortablejs","commit_stats":{"total_commits":22,"total_committers":4,"mean_commits":5.5,"dds":0.2727272727272727,"last_synced_commit":"771c562e6542cdd202b03fea4073fe057859701e"},"previous_names":["wotzebra/livewire-sortablejs","nextapps-be/livewire-sortablejs"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/wotzebra/livewire-sortablejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotzebra%2Flivewire-sortablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotzebra%2Flivewire-sortablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotzebra%2Flivewire-sortablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotzebra%2Flivewire-sortablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wotzebra","download_url":"https://codeload.github.com/wotzebra/livewire-sortablejs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotzebra%2Flivewire-sortablejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004179,"owners_count":26083688,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","laravel-livewire","livewire","sortable","sortablejs"],"created_at":"2024-09-30T09:22:50.487Z","updated_at":"2025-10-10T14:37:44.469Z","avatar_url":"https://github.com/wotzebra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Livewire Sortable.js\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/@wotz%2Flivewire-sortablejs.svg?style=flat-square)](https://npmjs.com/package/@wotz%2Flivewire-sortablejs)\n[![NPM total downloads](https://img.shields.io/npm/dt/@wotz%2Flivewire-sortablejs.svg?style=flat-square)](https://www.npmjs.com/package/@wotz%2Flivewire-sortablejs)\n[![NPM downloads per month](https://img.shields.io/npm/dm/@wotz%2Flivewire-sortablejs.svg?style=flat-square)](https://www.npmjs.com/package/@wotz%2Flivewire-sortablejs)\n\nA plugin/wrapper around [Sortable.js](https://github.com/SortableJS/Sortable) package.\n\n## Why use this instead of Livewire's official [livewire-sortable](https://github.com/livewire/sortable) package?\n\nThe `livewire-sortable` package uses Shopify's sortable package. We noticed some issues with that package compared to Sortable.js:\n- Shopify's sortable package does not retain an item's original height and width while dragging. Sortable.js does this by default.\n- Sortable.js also works well in combination with Alpine.js while Shopify's sortable package can cause errors while dragging, especially when using Alpine.js `x-for` method in an draggable item.\n\n**Do you want to make the switch from `livewire-sortable` to `livewire-sortable.js`? That's easy, because this package works exactly the same!** The only difference is the javascript package it uses in the background. You will not have to change any Livewire attributes or methods!\n\n## Installation\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/@wotz/livewire-sortablejs@1.0.0/dist/livewire-sortable.js\"\u003e\u003c/script\u003e\n```\n\n### NPM\n\n```bash\nnpm install @wotz/livewire-sortablejs --save-dev\n```\n\nImport the package in your bundle:\n\n```js\nimport '@wotz/livewire-sortablejs';\n\n// or\n\nrequire('@wotz/livewire-sortablejs');\n```\n\n## Usage\n\n### One group with draggable items\n\nWhen you only have one list of draggable items (e.g. to-do list), you have to add the following attributes to your html:\n- `wire:sortable=\"methodName\"`: This attribute should be added to the html element that encapsulates all draggable items. The value of this attribute is the Livewire method that will be executed when an item has been dragged.\n- `wire:sortable.options`: This optional attribute can be added to the html element that has the `wire:sortable` attribute. With the different [options](https://github.com/SortableJS/Sortable#options) of Sortable.js, you can use this attribute to customize how the items are dragged and sorted.\n- `wire:sortable.item=\"itemIdentifier\"`: This atttribute should be added to each individual draggable item. The value of this attribute will be used to inform you about the updated order.\n- `wire:sortable.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.\n\n```blade\n\u003cul wire:sortable=\"updateTaskOrder\" wire:sortable.options=\"{ animation: 100 }\"\u003e\n    @foreach ($tasks as $task)\n        \u003cli wire:sortable.item=\"{{ $task-\u003eid }}\" wire:key=\"task-{{ $task-\u003eid }}\"\u003e\n            \u003ch4\u003e{{ $task-\u003etitle }}\u003c/h4\u003e\n            \u003cbutton wire:sortable.handle\u003edrag\u003c/button\u003e\n        \u003c/li\u003e\n    @endforeach\n\u003c/ul\u003e\n```\n\nWhen the order is updated, you will receive the following array structure in your Livewire method:\n\n```php\n[\n    [\n        'order' =\u003e 1,   // order of item (starts at 1, not 0)\n        'value' =\u003e 20,  // item id\n    ],\n]\n```\n\n### Multiple groups with draggable items\n\nWhen you have multiple lists, each with items that can be moved between those different lists, you have to add the following attributes to your html:\n- `wire:sortable-group=\"methodName\"`: This attribute should be added to the html element that encapsulates all lists. The value of this attribute is the Livewire method that will be executed when an item has been dragged.\n- `wire:sortable-group.item-group=\"groupIdentifier\"`: This atttribute should be added to the root element of a list with draggable items. The value of this attribute will be used to inform you about the updated order.\n- `wire:sortable-group.options`: This optional attribute can be added to every html element that has the `wire:sortable-group.item-group` attribute. With the different [options](https://github.com/SortableJS/Sortable#options) of Sortable.js, you can use this attribute to customize how the items are dragged and sorted.\n- `wire:sortable-group.item=\"itemIdentifier\"`: This atttribute should be added to each individual draggable item in each list. The value of this attribute will be used to inform you about the updated order.\n- `wire:sortable-group.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.\n\n```blade\n\u003cdiv wire:sortable-group=\"updateTaskOrder\"\u003e\n    @foreach ($groups as $group)\n        \u003cdiv wire:key=\"group-{{ $group-\u003eid }}\"\u003e\n            \u003ch4\u003e{{ $group-\u003elabel }}\u003c/h4\u003e\n\n            \u003cul wire:sortable-group.item-group=\"{{ $group-\u003eid }}\" wire:sortable-group.options=\"{ animation: 100 }\"\u003e\n                @foreach ($group-\u003etasks()-\u003eorderBy('order')-\u003eget() as $task)\n                    \u003cli wire:sortable-group.item=\"{{ $task-\u003eid }}\" wire:key=\"task-{{ $task-\u003eid }}\"\u003e\n                        \u003cspan\u003e{{ $task-\u003etitle }}\u003c/span\u003e\n                        \u003cbutton wire:sortable-group.handle\u003edrag\u003c/button\u003e\n                    \u003c/li\u003e\n                @endforeach\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    @endforeach\n\u003c/div\u003e\n```\n\nWhen an item is dragged, you will receive the following array structure in the Livewire method you provided to the `wire:sortable-group` directive (in this example, the `updateTaskOrder` method):\n\n```php\n[\n    [\n        'order' =\u003e 1,            // order of group (starts at 1, not 0)\n        'value' =\u003e 20,           // group id\n        'items' =\u003e [\n            [\n                'order' =\u003e 1,    // order of item within group (starts at 1, not 0)\n                'value' =\u003e 50,   // item id\n            ]\n        ]\n    ]\n]\n```\n\n### Multiple draggable groups with draggable items\n\nWhen you have multiple lists, each with items that can be moved between those different lists and the lists themselves also need to be draggable, you have to add the following attributes to your html:\n- `wire:sortable=\"methodName\"`: This attribute should be added to the html element that encapsulates all draggable groups. The value of this attribute is the Livewire method that will be executed when a group has been dragged.\n- `wire:sortable.options`: This optional attribute can be added to the html element that has the `wire:sortable` attribute. With the different [options](https://github.com/SortableJS/Sortable#options) of Sortable.js, you can use this attribute to customize how the groups are dragged and sorted.\n- `wire:sortable.item=\"groupIdentifier\"`: This atttribute should be added to each individual draggable group. The value of this attribute will be used to inform you about the updated group order.\n- `wire:sortable.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag a group by dragging this html element. If you do not provide it, then the complete group will draggable.\n\n- `wire:sortable-group=\"methodName\"`: This attribute should be added to the html element that encapsulates all lists. The value of this attribute is the Livewire method that will be executed when an item has been dragged.\n- `wire:sortable-group.item-group=\"groupIdentifier\"`: This atttribute should be added to the root element of a list with draggable items. The value of this attribute will be used to inform you about the updated order.\n- `wire:sortable-group.options`: This optional attribute can be added to every html element that has the `wire:sortable-group.item-group` attribute. With the different [options](https://github.com/SortableJS/Sortable#options) of Sortable.js, you can use this attribute to customize how the items are dragged and sorted.\n- `wire:sortable-group.item=\"itemIdentifier\"`: This atttribute should be added to each individual draggable item in each list. The value of this attribute will be used to inform you about the updated order.\n- `wire:sortable-group.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.\n\n```blade\n\u003cdiv wire:sortable=\"updateGroupOrder\" wire:sortable-group=\"updateTaskOrder\" wire:sortable.options=\"{ animation: 50 }\"\u003e\n    @foreach ($groups as $group)\n        \u003cdiv wire:sortable.item=\"{{ $group-\u003eid }}\" wire:key=\"group-{{ $group-\u003eid }}\"\u003e\n            \u003ch4\u003e{{ $group-\u003elabel }}\u003c/h4\u003e\n            \u003cbutton wire:sortable.handle\u003edrag group\u003c/button\u003e\n\n            \u003cul wire:sortable-group.item-group=\"{{ $group-\u003eid }}\" wire:sortable-group.options=\"{ animation: 100 }\"\u003e\n                @foreach ($group-\u003etasks()-\u003eorderBy('order')-\u003eget() as $task)\n                    \u003cli wire:sortable-group.item=\"{{ $task-\u003eid }}\" wire:key=\"task-{{ $task-\u003eid }}\"\u003e\n                        \u003cspan\u003e{{ $task-\u003etitle }}\u003c/span\u003e\n                        \u003cbutton wire:sortable-group.handle\u003edrag item\u003c/button\u003e\n                    \u003c/li\u003e\n                @endforeach\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    @endforeach\n\u003c/div\u003e\n```\n\nWhen an item is dragged, you will receive the following array structure in the Livewire method you provided to the `wire:sortable-group` directive (in this example, the `updateTaskOrder` method):\n\n```php\n[\n    [\n        'order' =\u003e 1,            // order of group (starts at 1, not 0)\n        'value' =\u003e 20,           // group id\n        'items' =\u003e [\n            [\n                'order' =\u003e 1,    // order of item within group (starts at 1, not 0)\n                'value' =\u003e 50,   // item id\n            ]\n        ]\n    ]\n]\n```\n\nWhen a group is dragged, you will receive the following array structure in the Livewire method you provided to the `wire:sortable` directive (in this example, the `updateGroupOrder` method):\n\n```php\n[\n    [\n        'order' =\u003e 1,            // order of group (starts at 1, not 0)\n        'value' =\u003e 20,           // group id\n    ]\n]\n```\n\n## Building\n\n```bash\nnpm run build\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Credits\n\nThis package is inspired by Livewire's official [livewire-sortable](https://github.com/livewire/sortable) plugin.\n\n- [Günther Debrauwer](https://github.com/gdebrauwer)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwotzebra%2Flivewire-sortablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwotzebra%2Flivewire-sortablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwotzebra%2Flivewire-sortablejs/lists"}