使用 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
使用 SortableJS 组件的 Blazor 可排序列表_第1张图片
每周五,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 文件。
使用 SortableJS 组件的 Blazor 可排序列表_第2张图片
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>

使用 SortableJS 组件的 Blazor 可排序列表_第3张图片
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);
}

使用 SortableJS 组件的 Blazor 可排序列表_第4张图片

设置 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 是一个开源社区项目。

你可能感兴趣的:(Blazor,.NET)