Question

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

Answer 1

您是否尝试将

放在您的设计盒类中

 private SmartCache GetTester(out Mock<IMemoryCache> memory, out Mock<IRedisCache> redis)
 {
     memory = new Mock<IMemoryCache>();
     redis = new Mock<IRedisCache>();
     return new SmartCache(memory.Object, redis.Object);
 }

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

2 个答案: