これは、SO "cdkdnd"と "nested"に関する3番目の質問です。
私は他のSO質問の ハッキーな提案 を完全には得られませんでした。
これが非常に基本的で単純なものです -> STACKBLITZ <- 私が作成しました。コンテナ内のネストされた要素と対話するところまで、すべてが正常に機能します。
ネストされた要素だけを並べ替えようとすると、angularは、入れ子になった要素をコンテナ自体で並べ替えようとします...これにより望ましくない動作が発生します。
誰かがこれを解決する方法を知っていますか?これは明日さらに作業します。
それでもこれに対する答えを探している場合は、cdkDragBoundary
を使用して、要素をドラッグできる場所を制限できます。あなたの例では、それは以下を含みます:
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>
*コンテナをターゲットにするために使用されているクラスを編集しました