Question

我对Angular 7 CDK拖放功能有疑问。我想要的是以下内容：我需要一个可调整大小的矩形div，该容器要用作拖放的边界元素（cdkDragBoundary）。所以这很简单。

<div class="drag-boundary">
    <div cdkDrag cdkDragLockAxis="x" (cdkDragEnded)="onDragDropped($event)" 
         cdkDragBoundary=".drag-boundary" />
    </div>
</div>

矩形是绝对定位的，因此我使用width和left属性来调整大小和位置。

问题：只要不更改矩形的大小，就不能将其拖到边界元素之外，因此它可以正常工作。但是，当我更改div的大小（通过Chrome或通过代码手动更改）时，cdkDrag认为该矩形仍然具有其原始大小，并正在相应地处理拖动。如果我把整个东西放到一个选项卡中，然后切换选项卡然后再回来，那么cdkDrag将重新初始化，以便边界再次起作用，但是我不知道如何从代码中做到这一点。

所以简而言之，问题是如何使cdkDrag始终保持可拖动元素的实际大小（如果已更改）？

感谢帮助！

Answer 1

好的，我可以自己解决。这是一个hack，但我找不到其他方法。因此，似乎可拖动项的尺寸在第一次拖动后就被缓存了，所以我只需要在处理程序中清除它，就迫使下一次拖动重新评估尺寸：）

protected onDragDropped(ev: Event) {
    ...
    ev['source']._dragRef._previewRect = null;
    ...
}

角CDK拖放边界

1 个答案: