{"id":13423012,"url":"https://github.com/livewire/sortable","last_synced_at":"2025-05-15T16:03:11.403Z","repository":{"id":37422465,"uuid":"233496411","full_name":"livewire/sortable","owner":"livewire","description":"A plugin to bring drag/sort capability to Livewire","archived":false,"fork":false,"pushed_at":"2024-09-23T23:19:44.000Z","size":319,"stargazers_count":539,"open_issues_count":33,"forks_count":50,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-11T22:38:12.400Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/livewire.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-01-13T02:39:30.000Z","updated_at":"2025-04-10T16:59:06.000Z","dependencies_parsed_at":"2024-01-14T23:57:04.425Z","dependency_job_id":"900635f7-15e1-469d-897d-5f146345ecf2","html_url":"https://github.com/livewire/sortable","commit_stats":{"total_commits":23,"total_committers":8,"mean_commits":2.875,"dds":0.5217391304347826,"last_synced_commit":"f0fdc7d5bd52b29f9675d774d2e7d4a0bcdfcd53"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livewire%2Fsortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livewire%2Fsortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livewire%2Fsortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livewire%2Fsortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livewire","download_url":"https://codeload.github.com/livewire/sortable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374400,"owners_count":22060609,"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":[],"created_at":"2024-07-30T23:01:05.279Z","updated_at":"2025-05-15T16:03:11.371Z","avatar_url":"https://github.com/livewire.png","language":"JavaScript","funding_links":[],"categories":["UI","Packages / Plugins"],"sub_categories":[],"readme":"# Livewire Sortable\n\nA plugin/wrapper around [Shopify's sortable package](https://github.com/Shopify/draggable/tree/master/src/Sortable). It makes implementing sortable interfaces super simple using Livewire.\n\n## Installation\n\n### CDN\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/livewire/sortable@v1.x.x/dist/livewire-sortable.js\"\u003e\u003c/script\u003e\n```\n\n\u003e Note: this package only supports Livewire v3. If you are using v2, use version `0.3.0` of this package.\n\n### NPM\n```\nnpm install livewire-sortable --save-dev\n```\nImport the package in your bundle:\n```\nimport 'livewire-sortable'\n// Or.\nrequire('livewire-sortable')\n```\n## Usage\n\nFor simple layouts that only require simple sorting like a todo list, add the `wire:sortable`, `wire:sortable.item`, and `wire:sortable.handle` attributes to your markup as follows.\n\n```html\n\u003cul wire:sortable=\"updateTaskOrder\"\u003e\n    @foreach ($tasks as $task)\n        \u003cli wire:sortable.item=\"{{ $task-\u003eid }}\" wire:key=\"task-{{ $task-\u003eid }}\"\u003e\n            \u003ch4 wire:sortable.handle\u003e{{ $task-\u003etitle }}\u003c/h4\u003e\n            \u003cbutton wire:click=\"removeTask({{ $task-\u003eid }})\"\u003eRemove\u003c/button\u003e\n        \u003c/li\u003e\n    @endforeach\n\u003c/ul\u003e\n```\n\nFor creating a nested layout with draggable groups with draggable items inside each group, similar to Trello, add the `wire:sortable`, `wire:sortable-group`, `wire:sortable.item`, `wire:sortable.handle`, `wire:sortable-group.handle`, `wire:sortable-group.item-group`, and `wire:sortable-group.item` attributes to your markup as follows.\n\n```html\n\u003cdiv wire:sortable=\"updateGroupOrder\" wire:sortable-group=\"updateTaskOrder\" style=\"display: flex\"\u003e\n    @foreach ($groups as $group)\n        \u003cdiv wire:key=\"group-{{ $group-\u003eid }}\" wire:sortable.item=\"{{ $group-\u003eid }}\"\u003e\n            \u003cdiv style=\"display: flex\"\u003e\n                \u003ch4 wire:sortable.handle\u003e{{ $group-\u003elabel }}\u003c/h4\u003e\n\n                \u003cbutton wire:click=\"removeGroup({{ $group-\u003eid }})\"\u003eRemove\u003c/button\u003e\n            \u003c/div\u003e\n\n            \u003cul wire:sortable-group.item-group=\"{{ $group-\u003eid }}\"\u003e\n                @foreach ($group-\u003etasks()-\u003eorderBy('order')-\u003eget() as $task)\n                    \u003cli wire:key=\"task-{{ $task-\u003eid }}\" wire:sortable-group.item=\"{{ $task-\u003eid }}\"\u003e\n                        \u003cspan wire:sortable-group.handle\u003e{{ $task-\u003etitle }}\u003c/span\u003e\n                        \u003cbutton wire:click=\"removeTask({{ $task-\u003eid }})\"\u003eRemove\u003c/button\u003e\n                    \u003c/li\u003e\n                @endforeach\n            \u003c/ul\u003e\n\n            \u003cform wire:submit.prevent=\"addTask({{ $group-\u003eid }}, $event.target.title.value)\"\u003e\n                \u003cinput type=\"text\" name=\"title\"\u003e\n\n                \u003cbutton\u003eAdd Task\u003c/button\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n    @endforeach\n\n    \u003cform wire:submit.prevent=\"addGroup\"\u003e\n        \u003cinput type=\"text\" wire:model=\"newGroupLabel\"\u003e\n\n        \u003cbutton\u003eAdd Task Group\u003c/button\u003e\n    \u003c/form\u003e\n\u003c/div\u003e\n```\n\n## Styling\nIf you want to add your own styles to elements during various \"draggable\" states (like adding a shadow to an item while dragging), reference Shopify's Draggable/Sortable plugin's docs directly: https://github.com/Shopify/draggable/blob/58d79dc9fb5b82271c5dfec74a5c9207cfab01f5/src/Draggable/README.md#classes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivewire%2Fsortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivewire%2Fsortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivewire%2Fsortable/lists"}