1

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

在此处输入图像描述

4

2 回答 2

2

您是否尝试过将您的设计盒类与

position: absolute
于 2019-10-25T17:15:54.873 回答
0

这个问题已经足够老了，您可能已经得到了答案，但是如果我正确理解了这个问题，那么您使 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>
于 2021-02-12T23:49:47.723 回答