使用 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 tuple
var (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 属性。我可能会在某个时候将其作为一个设置。
获取 Blazor Sortable
查看 Blazor Sortable 并告诉我们您的想法！您可以用它做很多事情，包括克隆项目、禁用某些项目的排序、指定拖动手柄等等。我们还没有实现 SortableJS 的所有功能。欢迎拉取请求！
Blazor Sortable 是一个开源社区项目。