Angular сортировка материалов рядом с перетаскиванием - PullRequest
Новая
       7

Angular сортировка материалов рядом с перетаскиванием

0 голосов
/ 24 февраля 2020

Я успешно реализовал сортировку и перетаскивание, но тут начинается веселье. Мне нужно их обоих в одном списке. В этот момент он работает как ... я могу сортировать (это нормально), я могу перетаскивать (это нормально), но я не могу бросить, каждый раз, когда он возвращается к первой позиции. 

<table cdkDropList matSort (cdkDropListDropped)="drop($event)" (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Name</th>
  </tr>
  <tr *ngFor="let element of sortedData" cdkDrag>
    <td>{{element.name}}</td>
  </tr>
</table>

Это является частью файла html, ноль ошибок. Кто-нибудь знает, как заставить это работать?

Обновление 1

Как теперь мой стол выглядит в html: 

<table mat-table [dataSource]="elements" class="mat-elevation-z8" cdkDropList (cdkDropListDropped)="drop($event)">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></tr>
</table>

Ц: 

@Input() elements: Element[];
dataSource = this.elements;
displayedColumns: string[] = ['name'];
@ViewChild(table) table: MatTable<Element>;

drop(event: CdkDragDrop<FileElement[]>) {
  moveItemInArray(this.fileElements, event.previousIndex, event.currentIndex);
}

И css: 

table {
  width: 100%;
}
.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);
}

.example-box:last-child {
  border: none;
}

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

Почему после возврата строки отбрасывания в предыдущее место: (?

...