Alpine.js has a new first-party Sort plugin in the ecosystem, which allows you to easily re-order elements by dragging them with your mouse. The Sort plugin uses the SortableJS project under the hood for the heavy lifting of sorting elements and provides a nice API for Alpine:
<ul x-sort> <li x-sort:item>foo</li> <li x-sort:item>bar</li> <li x-sort:item>baz</li> </ul>
This small, yet mighty plugin provides the following features:
- Sorting groups
- Custom drag handles
- Support for Ghost elements
- Customizable configuration for SortableJS
The author Caleb Porzio has also created a new screencast series on the Livewire Site for the Sort plugin. It takes you deep into building a sortable drag-and-drop experience from the JS to the database.
The series consists of 11 videos with over an hour of content:
- Building a Todo List
- Storing positions in the database
- Using Alpine's Sort Plugin
- Sorting items in the database
- Handling removals
- Adding drag handles
- Extracting a Blade Component
- Extracting an Eloquent Trait
- Re-arranging Items
- Sorting between groups
To get started with the Sort plugin, check out the Alpine Documentation. You can also view the Sort screencasts on the Livewire Website.
