Livewire SortableJS 使用教程

Livewire SortableJS 使用教程

livewire-sortablejsA Laravel Livewire plugin that makes it easy to use Sortable.js项目地址:https://gitcode.com/gh_mirrors/li/livewire-sortablejs

1、项目介绍

Livewire SortableJS 是一个用于 Laravel Livewire 的插件，它提供了一种简洁的方式来创建可拖动排序的内容列表。这个库由 @nextapps-be 维护，并且兼容 Livewire 的最新版本。它基于 SortableJS，一个业界知名的拖放排序库，以其出色的性能和兼容性而著名。相比 Livewire 官方的 livewire-sortable 包（基于 Shopify 的 sortable），这个项目解决了几个关键问题，如保留元素尺寸、与 Alpine.js 兼容等。

2、项目快速启动

安装

首先，确保你已经安装了 Laravel 和 Livewire。然后，通过 Composer 安装 Livewire SortableJS：

composer require nextapps-be/livewire-sortablejs

配置

在你的 Livewire 组件中，引入 Sortable trait：

use Livewire\WithSortable;

class MyComponent extends Component
{
    use WithSortable;

    public $items = [];

    public function mount()
    {
        $this->items = ['Item 1', 'Item 2', 'Item 3'];
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}

视图

在你的 Blade 视图中，使用 sortable 指令来启用拖放排序：

<div wire:sortable="updateOrder">
    @foreach($items as $item)
        <div wire:sortable.item="{{ $item }}" wire:key="item-{{ $item }}">
            {{ $item }}
        </div>
    @endforeach
</div>

更新排序

在组件中定义 updateOrder 方法来处理排序更新：

public function updateOrder($items)
{
    $this->items = $items;
    // 保存排序到数据库或其他存储
}

3、应用案例和最佳实践

应用案例

• 待办事项应用：轻松调整任务顺序。
• 内容管理系统：灵活管理文章、图片或其他内容的排列。
• 电商网站：允许用户自定义产品收藏夹的顺序。
• 数据可视化：创建用户可定制的数据面板布局。

最佳实践

• 保持元素尺寸：SortableJS 在拖动时会保持元素原始的高度和宽度，确保用户体验流畅。
• 与 Alpine.js 集成：与 Alpine.js 框架无缝配合，为你的项目带来轻量级的组件式交互体验。
• 多样化功能：支持单组、多组以及多组拖放元素，满足复杂业务需求。

4、典型生态项目

• Alpine.js：一个轻量级的 JavaScript 框架，与 Livewire 和 SortableJS 完美结合，提供更丰富的交互体验。
• Laravel Livewire：一个用于构建动态交互式 Web 应用的 Laravel 扩展，与 SortableJS 结合使用，可以实现更复杂的前端交互。

通过以上步骤，你可以快速上手并使用 Livewire SortableJS 来增强你的 Laravel 应用的交互性和用户体验。

livewire-sortablejsA Laravel Livewire plugin that makes it easy to use Sortable.js项目地址:https://gitcode.com/gh_mirrors/li/livewire-sortablejs