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 Livewire Sort Screencast Series
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.
The post Sort Elements with the Alpine.js Sort Plugin appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Source: Read MoreÂ
