Ionic 重新排序

Ionic 提供了一个 <ion-reorder> 组件用于重新排序功能。它允许您拖动和放下列表项，从而更改列表元素的顺序。 <ion-reorder> 组件需要与 <ion-reorder-group> 一起使用，以提供可视化的拖放界面。 <ion-reorder-group> 充当 <ion-reorder> 内列表元素的包装器。

示例

在此示例中，我们将讨论如何实现重新排序组件，以允许将项目拖放到新位置。 在这里，我们还将通过调用 complete() 方法来更新列表项。

Home.page.html

HTML 页面包含 <ion-reorder-group> 组件内的列表项，该组件使用 angular *ngFor 指令 迭代 items 数组。 在 <ion-reorder-group> 中，我们将 disabled 属性设置为 false，这启用了拖放功能。 ionItemReorder 是一个事件，它使能够完成项目的重新排序。

Home.page.ts

此页面包含 onRenderItems($event) 的实现。 它包含拖动项的 from 和 to 索引。 然后，它使用 splice() 方法，该方法从数组中删除拖动的项，并将其分配给变量 draggedItem。 之后，它调用 complete() 方法以完成重新排序操作。

输出

执行该应用程序时，将给出以下输出。

接下来，从列表中拖动任何项目，然后将其放到新位置。 例如，我们将 Robert item 拖动并放置到如下图所示的第四个位置。 您还将在控制台中收到一条消息，表明 将项目从 0 移动到 3。