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

Когда я добавляю несколько элементов 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>

введите здесь описание изображения


angular angular8 angular-dragdrop
person Yevhen    schedule 01.10.2019    source источник
comment
Кто-нибудь может помочь с этим вопросом?   -  person Yevhen    schedule 10.10.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

position: absolute
person Francis Groleau    schedule 25.10.2019

arrow_upward
0
arrow_downward

Этот вопрос достаточно устарел, и вы, вероятно, уже получили ответ, но если я правильно понимаю вопрос, вы можете сделать FreeDragPostion независимым от других элементов cdkDrag, используя разные ссылки на компоненты. Что-то вроде этого:

export class AppComponent {
   containers = [];
   ngOnInit() {
      this.containers[1]= {value:'Item 1', position: {x:0,y:0}};
      this.containers[2]= {value:'Item 2', position: {x:0,y:0}};
      this.containers[3]= {value:'Item 3', position: {x:0,y:0}};
   }
}

И ваш HTML будет выглядеть примерно так:

<div class="col-md-6">
    <div class="example-boundary">
        <div cdkDrag class="design-box" *ngFor="let c of containers"
             [cdkDragFreeDragPosition]="c.position"
             (cdkDragEnded)="dragEnded_new($event)">
            {{c.value}}
        </div>
    </div>
</div>
person Kris Bishop    schedule 12.02.2021