cdkDragFreeDragPosition 位置取决于之前的每个 cdkDrag 元素答案

【问题标题】：cdkDragFreeDragPosition position depends from each previous cdkDrag elementcdkDragFreeDragPosition 位置取决于之前的每个 cdkDrag 元素
【发布时间】：2019-10-01 13:46:04
【问题描述】：

当我在页面上添加几个 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

【解决方案1】：

你有没有试过把你的设计框类放在

position: absolute

【讨论】：

我也遇到了类似的问题，我尝试了 Kris Bishop 的解决方案，发现我的 freeDragPosition 已经设置为 0,0，但您的解决方案非常有效。谢谢！

【解决方案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>

【讨论】：