更新1

Question

我成功实现了排序和拖放操作，但是有趣的地方开始了。我需要将它们都放在一个列表中。此时，它的工作方式类似于...我可以排序（可以），可以拖动（可以），但是每次放回到第一位置时我都不能放下。

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

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

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

为什么拖放行后返回到先前的位置：（？

拖放附近的角度材料分类

更新1

0 个答案: