使用 Alpine.js 排序插件排序元素

Alpine.js 在生态系统中新增了一个首选的排序插件，它允许您通过鼠标轻松地重新排序元素。排序插件在后台使用 SortableJS 项目来完成排序元素的繁重工作，并为 Alpine 提供了一个不错的 API。

<ul x-sort>
    <li x-sort:item>foo</li>
    <li x-sort:item>bar</li>
    <li x-sort:item>baz</li>
</ul>

这个小而强大的插件提供了以下功能

• 排序组
• 自定义拖动句柄
• 支持 Ghost 元素
• 可定制的 SortableJS 配置

作者 Caleb Porzio 还为排序插件创建了一个新的 视频教程系列，该系列位于 Livewire 网站上。它将带您深入了解从 JS 到数据库的排序拖放体验的构建过程。

该系列包含 11 个视频，时长超过一小时。

• 构建待办事项清单
• 在数据库中存储位置
• 使用 Alpine 的排序插件
• 排序数据库中的项目
• 处理移除操作
• 添加拖动句柄
• 提取 Blade 组件
• 提取 Eloquent 特性
• 重新排列项目
• 在组之间排序

要开始使用排序插件，请查看 Alpine 文档。您也可以在 Livewire 网站 上观看排序视频教程。