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

作者：Burke Holland
排版：Alan Wang

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

注意：Blazor Sortable 是一个开源社区组件，而不是 Microsoft 的官方组件。Blazor 的 Fluent UI 团队正在致力于在即将发布的 Blazor 的 Fluent UI 版本中集成可排序组件。您现在可以尝试 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 Sortable

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 = "The Very Hungry Caterpillar", Author = "Eric Carle", Year = 1969 },new Book { Title = "Where the Wild Things Are", Author = "Maurice Sendak", Year = 1963 },new Book { Title = "Goodnight Moon", Author = "Margaret Wise Brown", Year = 1947 },new Book { Title = "The Cat in the Hat", Author = "Dr. Seuss", Year = 1957 },new Book { Title = "Charlotte's Web", Author = "E.B. White", Year = 1952 },new Book { Title = "Harry Potter and the Sorcerer's Stone", Author = "J.K. Rowling", Year = 1997 },new Book { Title = "The Lion, the Witch and the Wardrobe", Author = "C.S. Lewis", Year = 1950 },new Book { Title = "Matilda", Author = "Roald Dahl", Year = 1988 },new Book { Title = "The Giving Tree", Author = "Shel Silverstein", Year = 1964 },new Book { Title = "Oh, the Places You'll Go!", Author = "Dr. Seuss", Year = 1990 }
};

您可以在 SortableList 中像下面这样呈现此列表…

<div><SortableList Items="books" Context="book"><SortableItemTemplate><div class="book"><p>@book.Title</p></div></SortableItemTemplate></SortableList>
</div>

在这里插入图片描述
SortableList 组件将使用 SortableItemTemplate 呈现项目列表，然后使用 SortableJS 使列表变得可以排序。Context 参数用于定义变量的名称，该变量将用于表示列表中的每个项目。在本例中，Context 是 book，因此列表中的每个项目都将由一个名为 book 的变量表示。

但是，如果您此时尝试拖放项目，您会发现无论您怎么拖放一个项目，它都会回到之前的位置。这是因为我们没有告诉 SortableList 在列表排序时该做什么。我们通过处理 OnUpdate 事件并自己进行排序来做到这一点。

<div><SortableList Items="books" Context="book" OnUpdate="@SortList"><SortableItemTemplate><div class="book"><p>@book.Title</p></div></SortableItemTemplate></SortableList>
</div>
...
public void SortList((int oldIndex, int newIndex) indices)
{// deconstruct the tuplevar (oldIndex, newIndex) = indices;var items = this.books;var itemToMove = items[oldIndex];items.RemoveAt(oldIndex);if (newIndex < items.Count){{items.Insert(newIndex, itemToMove);}}else{{items.Add(itemToMove);}}
}

每当列表排序时，都会调用 OnUpdate 事件处理程序。它将传递一个包含已移动项目的旧索引和新索引的元组。在 SortList 方法中，我们将元组解构为两个变量，然后使用它们来移动列表中的项目。

永远不要改变 Blazor 控制的 DOM，这一点非常重要。Blazor 保留 DOM 的内部副本，如果您使用 JavaScript 等内容更改它，您将得到奇怪的结果，因为页面状态将与 Blazor 的内部状态不同步。因此，我们在幕后所做的就是取消 JavaScript 移动，这样被移动的项目就不会真的在页面上移动。然后我们移动列表中的项目，Blazor 将按照新顺序重新渲染列表。

一个更复杂的例子

SortableJS 是一个非常强大的库，它可以做的不仅仅是排序列表。它还可以在列表之间排序、克隆项目、过滤项目等等。SortableList 组件支持许多这样的功能。让我们看一个更复杂的例子——两个列表之间的排序…

<div><div class="container"><div class="columns"><div class="column"><h3>Books</h3><SortableList Items="books" Context="book" OnRemove="@AddToFavoriteList" Group="favorites"><SortableItemTemplate><div class="book"><p>@book.Title</p></div></SortableItemTemplate></SortableList></div><div class="column"><h3>Favorite Books</h3><SortableList Items="favoriteBooks" Context="book" OnRemove="@RemoveFromFavoriteList" Group="favorites"><SortableItemTemplate><div class="book"><p>@book.Title</p></div></SortableItemTemplate></SortableList></div></div></div>
</div>

在此示例中，我们有两个列表 - 所有书籍的列表和最喜欢的书籍的列表。它们通过 Group 属性链接在一起。

我们希望能够将书籍从所有书籍列表拖放到最喜欢的书籍列表中。要做到这一点，我们需要处理两个列表的 OnRemove 事件。

public void AddToFavoriteList((int oldIndex, int newIndex) indices)
{var (oldIndex, newIndex) = indices;var book = books[oldIndex];favoriteBooks.Insert(newIndex, book);books.RemoveAt(oldIndex);
}public void RemoveFromFavoriteList((int oldIndex, int newIndex) indices)
{var (oldIndex, newIndex) = indices;var book = favoriteBooks[oldIndex];books.Insert(newIndex, book);favoriteBooks.RemoveAt(oldIndex);
}

在这里插入图片描述

设置 SortableList 的样式

默认情况下，SortableList 包含一些默认样式，这些样式在拖动时会隐藏“ghost”元素。这将在您拖动时在项目之间产生间隙。如果没有这种样式更改，项目本身将显示为可放置拖动项目的目标。这有点奇怪，因为这意味着您拖动的项目也是您放置拖动项目的目的地。但如果这就是您想要选的样式，您可以覆盖 SortableList.razor.css 文件中的样式，或者根本不包含它。

由于 SortableList 内呈现的所有内容都呈现在 SortableItemTemplate 子项内，因此您必须使用“::deep”修饰符才能使任何更改生效。

如果您从父页面/组件（即 Index.razor.css）设置 SortableList 的样式，则必须将 SortableList 包装在容器元素中，并使用“::deep”修饰符。如果您不这样做，您的样式将不会生效，您也会因为我制作这个组件却没有这个功能而感到悲伤、困惑和生气。这是 Blazor 的问题，而不是 SortableJS 的问题。您可以在 ASP.NET Core 文档中阅读有关范围样式的更多信息。

我觉得没有人会读最后一段，很多人可能会哀号。我先说声抱歉，但其实我已经尝试过了。

为什么不使用 HTML5 拖放？

这是一个很好的问题，也是我在使用 JavaScript 解决方案之前研究过的一个问题。总而言之，原生 HTML5 对拖放的支持还不够强大，无法实现合适的排序。例如，无法对大部分拖放行为进行样式化。它看起来……很愚蠢……而且我们对此无能为力。它对跨浏览器的支持也很不稳定。有一些基本属性仅适用于 Chrome。

综上所述，SortableJS 实际上会尝试使用 HTML5 拖放，并在 iOS 等平台上退回到 JavaScript 解决方案。但是，您仍然无法控制样式，并且会出现看起来愚蠢的拖放操作。所以我在 SortableList 上关闭了 HTML5 的方式。如果您希望它重新打开，请进入 SortableList.razor.razor.js 文件并删除 forceFallback: true 属性。我可能会在某个时候将其作为一个设置。