Angular CDK 拖放边界

Question

我对 Angular 7 CDK 拖放功能有疑问。我想要的是以下内容：我需要一个容器内的 resizable 矩形 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

好的，我可以自己解决。这是一个黑客，但我没有找到其他方法。因此，似乎可拖动项目的尺寸在第一次拖动后被缓存，所以我只需要在处理程序中清除它，强制下一次拖动重新评估尺寸:)

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