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.