cdkDrag，cdkDropList Angular Material的页面刷新保存顺序

Question

简介

我有一个待办事项列表，它在 cdkDropList 内的元素上利用 Angular Material 的 cdkDrag 指令。将项目标记为“待办事项”或“已完成”，反之亦然。

问题

用户交互中存在一定程度的细节，即页面刷新，这会导致项目不一定按照它们被拖动的顺序。

以这个例子为例，其中一个用户被分配了 3 个任务：吃早餐，吃午餐，吃晚餐：

用户不喜欢该优先级，并决定改为按此顺序处理他/她的饮食任务。拖放交互发生，待办事项列表最终确定为：

在页面刷新时，这就是问题所在。它会回到原来的状态：

吃早餐，吃午餐，吃晚餐

什么时候应该是：

吃晚餐，吃早餐，吃午餐

这个观察结果也适用于标记为完成的项目。

我需要确认此交互的当前状态缺少什么。请注意，此实现基于How To Build an App With Drag and Drop With Angular

感谢您的宝贵时间。

Answer 1

您需要将“字符串”数组转换为“对象”数组

想象一下你有一个数组，比如

[{task:"eat breakfast",order:0},
 {task:"eat lunch",order:1},
 {task:"eat dinner",order:2}
]

在您的放置函数中，您需要重新计算属性顺序。使用典型的 drop 函数

drop(event: CdkDragDrop<any[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
      //if transfer, recalculate the order of previous (the list from drag)
      event.previousContainer.data.forEach((x,index)=>{
          x.order=index
      })
    }
    //always, recalculate the order of the container (the list to drag)
      event.container.data.forEach((x,index)=>{
          x.order=index
      })
  }

那么你无论如何都需要保存数据（我认为你可以使用 ngOnDestroy），当你收到数据时不要忘记按顺序排序

注意：在this SO 中有一个使用 formArray 的 cdkDragList（仅用于排序）如果你想使用 FormArray 但它不是必需的，只有两个数组必须足够