cdkDragFreeDragPosition 位置取决于每个先前的 cdkDrag 元素

Question

当我在页面上添加几个 cdkDrag 元素时，每个元素的位置都取决于前一个元素。在我的屏幕上看，如果我将 "Item 3" 移动到容器的 0x0，"Item 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

你试过把你的设计框 class 和

position: absolute

Answer 2

这个问题已经够老了，您可能已经得到了答案，但如果我正确理解了这个问题，使 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>

cdkDragFreeDragPosition 位置取决于每个先前的 cdkDrag 元素

cdkDragFreeDragPosition position depends from each previous cdkDrag element

angular-dragdrop

angular

angular8