使用拖放交换角度网格中的元素

Question

我有一个带有 mat-grid-list 的 11 x 8 矩阵构建，我想通过拖放在此矩阵中交换元素。 矩阵将始终显示为 11x8 网格。所以它就像一个有 11 列和 8 行的表格，我想通过拖放来交换这个表格中单个单元格的内容。

角度：

<div class="plate">
    <mat-grid-list cols="11" rowHeight="60px" cdkDropList cdkDropListSortingDisabled
        (cdkDropListDropped)="drop($event)">
        <mat-grid-tile *ngFor=" let well of wells" [colspan]="1">
            <div class="well" cdkDrag [cdkDragData]="well">
                {{well}}
            </div>
        </mat-grid-tile>
    </mat-grid-list>
</div>

这很好用，我可以将 div 与类一起拖动。当我删除它时，currentIndex 和 previousIndex 的值总是相同的。它始终是我拖动的元素的索引，而不是我放置它的元素的索引。 例如，如果我拖动列表中的第一个元素，我会得到事件：

此外，事件中的容器元素是整个列表，而不是我放置它的元素。 调整 div.well 或 mat-grid-tile 的 z-index 并没有改变这一点。

非常感谢您的帮助。