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;
    ...
}

Angular CDK 拖放边界

Angular CDK Drag and Drop boundary

angular

angular-cdk

angular7