使用 SortableJS 组件的 Blazor 可排序列表
本篇翻译于Burke Holland的Sortable Lists for Blazor using a SortableJS Component
在Web 应用程序中，一个常见功能部分是可排序列表。SortableJS是我最喜欢的 JavaScript 库之一，在进行 Blazor 开发时我很想念它。为了解决这个问题，我决定包装 SortableJS 库，使其成为 Blazor 组件，名为Bazor 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 是一个开源社区项目。
如果大家有任何的技术问题，欢迎到我们的官方的.NET中文论坛 提问.
Light
Dark
0 comments