☰

cdkDragHandle は子コンポーネント内では動作しません 質問する

tag-icon • tag-icon angular drag-and-drop angular-cdk
cdkDragHandle は子コンポーネント内では動作しません 質問する

@angular/cdk 7.2.1 の使用: cdkDropList と cdkDrag コンポーネントのネストされたリストを保持する親コンポーネントを定義する場合、ネストされた子コンポーネント内で cdkDragHandle を定義しても機能しません。同じ構造がすべて同じコンポーネント内にある場合、cdkDragHandle は完全に機能します。

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

cdkDrag と同じコンポーネントで定義されていない場合でも cdkDragHandle を動作させるための修正方法を見つけた人はいますか?

ベストアンサー1

この解決策は私にとってはうまくいきました:

親コンポーネント:

<div cdkDropList #list="cdkDropList"
  [cdkDropListData]="myArray"
  (cdkDropListDropped)="drop($event)">

  <app-item
    *ngFor="let item of myArray"
    cdkDrag>
    <div cdkDragHandle></div>
  </app-item>

</div>

子コンポーネント (アプリ項目):

<div class="drag-container">
  <ng-content></ng-content>
  <div class="drag-handle">drag here</div>
</div>

次に、親コンポーネントの cdk-drag-handle クラスのスタイルを設定します。cdk-drag-handle はマテリアルに付属しているため、手動で適用する必要はありません。

.cdk-drag-handle {
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 100;
   background-color: transparent;
   cursor: move;
 }

次に、ドラッグ コンテナーを position: relative などの任意のスタイルで設定します。その中には、コンテナーの全幅と全高を占めるアイテム (ドラッグ ハンドル) があり、その中には画像 (補足として) が含まれています。

おすすめ記事