перетаскивание cdk во вложенной ситуации

Это третий вопрос здесь, касающийся "cdk dnd" и "nested"!

Я не совсем понял хакерское предложение другого SO вопроса.

Итак, вот очень простой и простой -> STACKBLITZ & lt; -, который я создал. Все отлично работает до такой степени, что я взаимодействую с вложенными элементами внутри контейнера.

Когда я пытаюсь отсортировать только вложенные элементы, angular пытается отсортировать вложенный элемент с помощью самого контейнера... что создает нежелательное поведение.

У кого-нибудь есть идеи как это решить? Я продолжу работать над этим завтра.

Ответ 1

Если вы все еще ищете ответ на этот вопрос, вы можете использовать cdkDragBoundary, чтобы ограничить место перетаскивания элемента. В вашем примере это будет включать:

Добавление класса в div, содержащий вложенный список
Добавление атрибута 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>

* Отредактировал класс, используемый для таргетинга на контейнер

Ответ 2

Ваш код выглядит и работает нормально. У вас просто ошибка в вашем component.html:

 id = "containerId"
// remove white space
 id="containerId"