web-dev-qa-db-ja.com

ネストされた状況でのcdkドラッグアンドドロップ

これは、SO "cdkdnd"と "nested"に関する3番目の質問です。

私は他のSO質問の ハッキーな提案 を完全には得られませんでした。

これが非常に基本的で単純なものです -> STACKBLITZ <- 私が作成しました。コンテナ内のネストされた要素と対話するところまで、すべてが正常に機能します。

ネストされた要素だけを並べ替えようとすると、angularは、入れ子になった要素をコンテナ自体で並べ替えようとします...これにより望ましくない動作が発生します。

誰かがこれを解決する方法を知っていますか？これは明日さらに作業します。

angulardrag-and-dropangular-cdk
14
Andre Elrico

それでもこれに対する答えを探している場合は、cdkDragBoundaryを使用して、要素をドラッグできる場所を制限できます。あなたの例では、それは以下を含みます：

  1. ネストされたリストを保持するdivにクラスを追加する
  2. 1で追加されたクラスを対象として、期間を保持するdivにcdkDragBoundary属性を追加します。

コンテナコンポーネントのHTMLは次のようになります。

<div style="background-color=pink;">
  <div [cdkDropListData]="timePeriods" cdkDropList cdkDropListOrientation="horizontal"
    id="containerId" [cdkDropListConnectedTo]="['allDataId']" 
  (cdkDropListDropped)="drop($event)" class="example-list">

    <div class="example-box" cdkDragBoundary=".example-list" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
  </div>
</div>

*コンテナをターゲットにするために使用されているクラスを編集しました

2
Borquaye