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

Question

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

谁能告诉我如何控制材料中的边界或建议其他一些可用于 angular 7 的插件。？

谢谢。

Answer 1

您可以使用cdkDragBoundarywhich 来防止用户将元素拖到另一个元素之外。

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

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

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