如何在Angular Material 7 CDK中限制一个边界之间的拖动元素

Question

对于我当前的项目，我试图在一个div中实现从一个位置到另一个位置的拖动元素。为此，我使用了Angular Material 7 CDK拖放功能。它在整个页面上拖动，但只想在特定的div内拖动。但我在Angular Material 7 CDK拖放中没有看到任何控制边界的选项。

有人能告诉我如何控制材料中的边界吗？或者建议一些其他插件，这些插件对于angular 7来说是紧凑的？

谢谢。

Answer 1

您可以使用cdkDragBoundary，这将有助于防止用户将一个元素拖到另一个元素之外。

您可以按以下方式使用它：

<div class="example-boundary">
<div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
I can only be dragged within the dotted container
</div>
</div>

你可以从这里阅读更多关于它的信息角材料限制元素内的移动