0

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 :(?

Community
  • 1
  • 1
Yamdi
  • 15
  • 7
  • Have you seen: https://stackoverflow.com/questions/53377450/reorder-mat-table-rows-with-angular-materials-drag-and-drop? – Z. Bagley Feb 24 '20 at 13:22
  • Nope, i tried to implement this, but at this moment i have issues with error: Cannot read property 'renderRows'. I can drag but after drop it returning to pervious place. – Yamdi Feb 25 '20 at 07:02
  • I hate that moment, when in stackblitz your implementation works fine, but not in app! Damn! – Yamdi Feb 25 '20 at 07:15
  • Ok, now i had clear console but still can't drop on proper place ... how it possible? – Yamdi Feb 25 '20 at 07:26
  • You either need to use a `trackBy` or do as they did in the stackblitz example and do a deep copy: https://stackblitz.com/edit/table-drag-n-drop?file=app%2Ftable-basic-example.ts – Z. Bagley Feb 25 '20 at 13:08
  • Deep copy is needed with one table? – Yamdi Feb 25 '20 at 13:31
  • Yes, that is to prevent the change from occurring outside of Angular's ngZone, which detects changes and updates accordingly. By doing a deep copy it forces the change to be detected and should update the table. This method isn't efficient, but it works. The most efficient method is to use a track by model, but would only be required for larger, enterprise level use. – Z. Bagley Feb 25 '20 at 15:10

0 Answers0