使用 Alpine.js 排序插件对元素进行排序

前端  /  管理员 发布于 7个月前   331

Alpine.js生态系统中有一个新的第一方排序插件，

通过它，您可以用鼠标拖动元素，轻松地对其重新排序。

排序插件在引擎盖下使用 SortableJS 项目来完成元素排序的重任，

https://github.com/SortableJS/Sortable

并为 Alpine.js 提供了一个很好的 API：

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

这款小巧而强大的插件具有以下功能：

排序组
自定义拖动手柄
支持幽灵元素
可对 SortableJS 进行自定义配置

https://github.com/SortableJS/Sortable?tab=readme-ov-file#options

作者 Caleb Porzio 还在 Livewire 网站上为排序插件创建了一个新的截屏系列。

https://livewire.laravel.com/screencast/drag-sorting/teaser

它将带您深入了解从 JS 到数据库的可排序拖放体验。

Livewire 分类截屏系列

该系列包括 11 个视频，内容超过一小时：

建立待办事项列表
在数据库中存储位置
使用高山排序插件
在数据库中排序项目
处理删除
添加拖动手柄
提取刀片组件
提取易乐特质
重新排列项目
在组之间排序

要开始使用排序插件，请查看 Alpine 文档。

https://alpinejs.dev/plugins/sort

您还可以在 Livewire 网站上观看排序截屏。

https://livewire.laravel.com/screencast/drag-sorting/teaser