时间戳

首页 > 解决方案 > cdk drag and drop in a nested situation

angular - cdk drag and drop in a nested situation

问题描述

This is the third question here on SO regarding "cdk dnd" and "nested"!

I did not quite get the hacky suggestion of the other SO question.

So here is a very basic and simple -> STACKBLITZ <- I've created. Everything works fine to the point where I interact with the nested elements inside the container.

When I try to sort just the nested elements, angular tries to sort the nested element with the container itself ... which creates unwanted behavior.

Does anyone have an idea how to solve this? I will further work this one tomorrow.

标签： angulardrag-and-dropangular-cdk

解决方案

如果您仍在寻找这个问题的答案，您可以使用cdkDragBoundary来限制可以拖动元素的位置。在您的示例中，它将涉及：

  1. 向包含嵌套列表的 div 添加一个类
  2. 将cdkDragBoundary属性添加到保存时间段的 div 中，以 1 中添加的类为目标。

容器组件的 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>

*编辑了用于定位容器的类

推荐阅读