Позиция cdkDragFreeDragPosition зависит от каждого предыдущего элемента cdkDrag

Question

Когда я добавляю несколько элементов cdkDrag на страницу, положение каждого из них зависит от предыдущего элемента. Глядя на мой экран, если я переместу «Элемент 3» в контейнер 0x0, координаты «Элемента 3» будут -250x0. Итак, вопрос: как сделать положение каждого элемента независимым от предыдущих элементов? Например, если я установил x: 0, y: 0 для всех элементов, каждый из них должен быть над другим.

Конечно, я знаю один способ, вычисляя положение, зависит от ширины и высоты предыдущего элемента, но, возможно,у нас есть более элегантный и простой способ?

Вот мой код:

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

Answer 1

Пытались ли вы поместить класс дизайна-коробки с

position: absolute