angular - cdkDragFreeDragPosition の位置は、前の各 cdkDrag 要素に依存します

Question

ページにいくつかの cdkDrag 要素を追加すると、それぞれの位置が前の要素に依存します。私の画面を見ると、「アイテム 3」をコンテナーの 0x0 に移動すると、「アイテム 3」の座標は -250x0 になります。問題は、各要素の位置を前の要素から独立させる方法です。たとえば、すべての要素に x:0、y:0 を設定した場合、それぞれが別の上にある必要があります。

もちろん、前の要素の幅と高さに基づいて位置を計算する方法は 1 つ知っていますが、もっとエレガントで簡単な方法があるでしょうか?

これが私のコードです：

<div class="col-md-6">
    <div class="example-boundary">
        <div cdkDrag class="design-box"
             [cdkDragFreeDragPosition]="{x:0, y:0}"
             (cdkDragEnded)="dragEnded_new($event)">
            Item 1
        </div>

        <div cdkDrag class="design-box"
             [cdkDragFreeDragPosition]="{x:0, y:0}"
             (cdkDragEnded)="dragEnded_new($event)">
            Item 2
        </div>

        <div cdkDrag class="design-box"
             [cdkDragFreeDragPosition]="{x:0, y:0}"
             (cdkDragEnded)="dragEnded_new($event)">
            Item 3
        </div>
    </div>
</div>