问题

I successful implemented sorting and drag & drop, but there fun begins. I need both of them in one list. At this moment it working like ... i can sort (it's ok), i can drag (it's ok) but i can't drop, every time it going back to first position.

<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>

This is a part of html file, zero errors. Somebody know how to make it work?

Update 1

How now my table looks in 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>

Ts:

@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);
}

And 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);
}

Why after drop row returning to pervious place :(?

来源：https://stackoverflow.com/questions/60376510/angular-material-sorting-near-drag-drop

标签

angular

sorting

drag-and-drop

Angular material sorting near drag & drop

问题

Update 1