cdkDragFreeDragPosition position depends from each previous cdkDrag element

Question

When i adding few cdkDrag elements on page, position each of them depends from previous element. Looking on my screen, if i move "Item 3" to 0x0 of container, "Item 3" coordinates will -250x0. So question is: how to make position of each element independent from previous elements? For example if i set x:0, y:0 for all elements, each one must be over another.

Of course i know one way, by calculating position depends from width and height of previous element, but maybe we have more elegant and easy way?

Here is my code:

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

Can anybody help with this question? – Yevhen Oct 10 '19 at 10:57 — Yevhen, Oct 10 '19 at 10:57

score 3 · Accepted Answer · answered Oct 25 '19 at 17:15

3

Have you try putting your design-box class with

position: absolute

answered Oct 25 '19 at 17:15

Francis Groleau

344
4
14

i was also facing this similar problem and I tried the solution from Kris Bishop and found out that I was already having my freeDragPosition set to 0,0 but your solution worked like a charm. Thanks! – Radiant Apr 13 '22 at 06:41

score 0 · Answer 2 · answered Feb 12 '21 at 23:49

This question is old enough that you probably already got your answer, but if I understand the question correctly, the way you make the FreeDragPostion independent of other cdkDrag elements is by using different component references. Something like this:

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

And your HTML would look something like this:

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

cdkDragFreeDragPosition position depends from each previous cdkDrag element

2 Answers2