Сохранить порядок на странице refre sh cdkDrag, cdkDropList Angular Материал - PullRequest
Новая
       108

Сохранить порядок на странице refre sh cdkDrag, cdkDropList Angular Материал

0 голосов
/ 17 июня 2020

Intro

У меня есть список дел, в котором используется директива Angular Material cdkDrag для элементов внутри cdkDropList. Пометить элементы как «необходимые» или «готовые» и наоборот очень просто.

Проблема

Существует определенный уровень детализации взаимодействия с пользователем, а именно, ссылка на страницу sh, в результате чего элементы не обязательно располагаются в том порядке, в котором они были перетаскены.

Рассмотрим этот пример, в котором пользователю назначены 3 задачи: завтракать , обедать , ужинать : enter image description here

Пользователю не нравится этот приоритет, и он решает вместо этого выполнять свои задания по питанию в этом порядке. Происходит взаимодействие перетаскивания, и список дел окончательно оформляется следующим образом: enter image description here

Ссылка на страницу sh, вот где начинается подводный камень. Он возвращается в исходное состояние:

съесть завтрак , съесть обед , съесть ужин

Когда явно должно быть:

съесть ужин , съесть завтрак , съесть обед

Это наблюдение также верно для элементов, отмеченных как выполненные.

Что это за недостающий элемент? Мне нужно признать текущее состояние этого взаимодействия. Обратите внимание, что эта реализация основана на Как создать приложение с помощью перетаскивания с помощью Angular

Спасибо за ваше время.

1 Ответ

1 голос
/ 18 июня 2020

Вам нужно преобразовать массив «строк» ​​в массив «объектов».

Представьте, что у вас есть массив таких элементов, как 

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

В вашей функции перетаскивания вам нужно повторно- рассчитать имущественный порядок. используя типичную функцию перетаскивания 

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), когда вы получили данные, не забывайте сортировать по порядку

ПРИМЕЧАНИЕ: В этот SO есть cdkDragList, использующий formArray (только для сортировки), если вы хотите использовать FormArray, но это не обязательно, просто с двумя массивами должно быть достаточно

...