1

私の現在のプロジェクトでは、ドラッグ要素を 1 つの div 内の別の位置に 1 つの位置に実装しようとしています。このために、Angular Material 7 CDK のドラッグ アンド ドロップ機能を使用しています。ページ全体をドラッグしますが、特定の div 内でのみドラッグしたいです。しかし、Angular Material 7 CDK のドラッグ アンド ドロップで境界を制御するオプションはありませんでした。

材料の境界を制御する方法や、Angular 7 で圧縮可能な他のプラグインを提案する方法を教えてもらえますか?

ありがとう。

4

2 に答える 2

0

ユーザーが cdkDrag 要素を別の要素の外にドラッグできないようにする場合は、CSS セレクターを cdkDragBoundary 属性に渡すことができます。この属性は、セレクターを受け入れ、それに一致する要素が見つかるまで DOM を検索することによって機能します。一致するものが見つかった場合は、それを超えて要素をドラッグできない境界として使用されます。cdkDragBoundary は、cdkDrag が cdkDropList 内に配置されている場合にも使用できます。 https://material.angular.io/cdk/drag-drop/overview

Blockquote 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 に答える