跨单元格的角表拖放项目

Question

我有这段代码使用ngFor循环构建动态表

<table style="width: 100%">
    <tr *ngFor="let item of tableData">
        <td *ngFor="let subItem of item">
            <cdk-drop (dropped)="drop($event)" [connectedTo]="drops | removeMe: subItem" class="list">

                <div cdkDrag class="box">{{subItem.id}}</div>

            </cdk-drop>
        </td>
    </tr>
</table>

这是一个演示https://stackblitz.com/edit/angular-drag-and-drop-table-wb8bu7?file=app%2Fcdk-drag-drop-axis-lock-example.html

问题是我无法正确设置桌子周围的物品。 我希望每个项目都可以在任何表格单元格周围移动并返回到其原始位置，等等。

你会怎么做？