Angular 如何将cdkDrag与mat grid一起使用

我想使用Angular 8 Material Design cdkDrag和mat grid list，我做了一个小测试项目来尝试

我的代码相当简单。app.component.html：

<style>
    .drag-handle {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #ccc;
        cursor: move;
        width: 24px;
        height: 24px;
    }
</style>

<div cdkScrollable cdkDropList (cdkDropListDropped)="drop($event)">
    <mat-grid-list cols="4" rowHeight="3:4" style="width: 25%;">{{number}}
        <div cdkDrag *ngFor="let number of numbers">
            <mat-grid-tile style="border: 1px solid green;">
                {{number}}
                <div class="drag-handle" cdkDragHandle>
                    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                        <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                        </path>
                        <path d="M0 0h24v24H0z" fill="none"></path>
                    </svg>
                </div>
            </mat-grid-tile>
        </div>
    </mat-grid-list>
</div>

.拖动手柄{
位置：绝对位置；
顶部：10px；
左：10px；
颜色：#ccc；
光标：移动；
宽度：24px；
高度：24px；
}
{{number}}
{{number}}

app.component.ts：

import { Component } from '@angular/core';

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'drag-drop';
    numbers: number[] = [];

    constructor() {
        for (let i = 0; i < 100; i++) {
            this.numbers.push(i);
        }
    }

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

从'@angular/core'导入{Component}；
从“@angular/cdk/drag drop”导入{CdkDragDrop，moveItemInArray}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题='拖放'；
编号：编号[]=[]；
构造函数（）{
for（设i=0；i<100；i++）{
这个。数字。推（i）；
}
}
drop（事件：CdkDragDrop）{
moveItemInArray（this.numbers、event.previousIndex、event.currentIndex）；
}
}

它能工作，但不是我想要的方式。我可以拖动每个磁贴，但我可以将其放置在任何位置：

我想要的是保持瓷砖整齐有序，如：

拖放瓷砖后，如何将其保持在网格中