使用 SortableJS 组件的 Blazor 可排序列表

Web 应用程序的一个常见功能是可排序列表。SortableJS是我最喜欢的 JavaScript 库之一，在使用 Blazor 开发时我错过了它。为了解决这个问题，我决定包装 SortableJS 使其成为 Blazor 组件，名为Bazor Sortable，我已在 GitHub 上开源了它，我认为您会喜欢的。在这篇文章中，我将引导您了解如何将其添加到您自己的 Blazor Web 应用程序中。

注意：Blazor Sortable 是一个开源社区组件，而不是 Microsoft 的官方组件。Fluent UI for Blazor 团队为 Fluent UI for Blazor 集成了一个可排序组件。您今天可以尝试Fluent UI Sortable Demo。

在这里查看演示： https: //blazorsortable.theurlist.com

每个星期五，Jon Galloway（你从未听说过他，但他是值得信赖的人）和我致力于在 Blazor 中重建一个名为theurlist.com的真实应用程序。该直播在 Twitch 和 .NET YouTube 上被称为“ Burke Learns Blazor ”（点赞并订阅！）。我们很高兴您加入我们。主要是因为我们需要所有可以得到的帮助来处理这件事，因为我不知道我在做什么。

我们最终需要一个可排序列表组件来进行此重建，虽然有一些“Blazor Sortable”示例，但我还是很喜欢SortableJS。SortableJS 是一个出色的库，用于构建可排序的项目列表，几乎具有您可能需要的所有功能 - 排序、列表之间的排序、克隆项目、过滤、自定义动画缓动、腰部支持。好吧——不是最后一个，但那就是，这是它唯一没有的东西。

因此，在 Steve Sanderson 的帮助下，我们在 SortableJS 上构建了一个简单的抽象，您可以将其放入您自己的应用程序中并使用。让我们看一下如何为您自己的 Blazor 应用使用和自定义 Blazor Sortable。

使用 Blazor 可排序

Blazor Sortable 的 GitHub 存储库包含可排序列表的源代码以及演示。对于您自己的项目，您只需要Shared/SortableList.razor,Shared/SortableList.razor.css和Shared/SortableList.razor.js文件。

该SortableList组件是一个通用组件，它接受项目列表并SortableItemTemplate定义如何呈现可排序列表中的每个项目。例如，假设您有一个如下所示的书籍列表......

public class Book
{
    public string Title { get; set; } = "";
    public string Author { get; set; }  = "";
    public int Year { get; set; }
}

public List<Book> books = new List<Book>
{
    new Book { Title =