1

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

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

谢谢。

4

2 回答 2

9

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

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

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

您可以从此处阅读更多关于它的信息Angular Material Restricting movement within an element

于 2019-01-02T15:13:42.550 回答
0

如果您想阻止用户将 cdkDrag 元素拖到另一个元素之外，您可以将 CSS 选择器传递给 cdkDragBoundary 属性。该属性通过接受选择器并查找 DOM 直到找到与其匹配的元素来工作。如果找到匹配项，它将被用作元素无法拖动的边界。当 cdkDrag 放置在 cdkDropList 中时，也可以使用 cdkDragBoundary。 https://material.angular.io/cdk/drag-drop/overview

块引用 cdkDragBoundary 

.example-box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  cursor: move;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-right: 25px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.example-boundary {
  width: 400px;
  height: 400px;
  max-width: 100%;
  border: dotted #ccc 2px;
}
<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>



<!-- Copyright 2021 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

于 2021-11-04T12:08:55.807 回答