Изменение порядка строк таблицы матов с помощью перетаскивания угловых материалов

Question

Angular 7 принес мощный DragDropModule с ним: https://material.angular.io/cdk/drag-drop/examples

Документация касается перестановки элементов в списках или переноса элементов между несколькими списками.Однако речь не идет о таблицах.

Мне было интересно, есть ли удобный способ использовать систему перетаскивания углового материала для переупорядочения строк в mat-table или cdk-table.

(Вы можете добавить cdkDropList в mat-table, который заставляет механизм работать, но без всех причудливых анимаций и заполнителей по умолчанию для перетаскивания.)

Делает что-то вроде простого в реализации по умолчанию для сортировкиСуществуют ли строки таблицы с помощью перетаскивания?

Спасибо за помощь:)

Answer 1

Найденный пример https://stackblitz.com/edit/angular-igmugp

Выглядит недостающая часть

this.table.renderRows();

Answer 2

Стилизация выполняется с помощью CSS (см. Вкладку CSS на странице примера). Я настроил его для работы с мат-таблицей:

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Я поместил это в свой основной файл styles.scss.

---

Для тех, кто интересуется, как реализовать перетаскивание на матовом столе, вам необходимо:

1. Добавить cdkDropList к mat-table
2. Добавить (cdkDropListDropped)="onListDrop($event)" к mat-table
3. Добавить cdkDrag к mat-row

onListDrop будет выглядеть примерно так:

onListDrop(event: CdkDragDrop<string[]>) {
  // Swap the elements around
  moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}

moveItemInArray - это функция углового материала. Вы можете импортировать его.