Угловое перетаскивание: удаление элемента cdkDrag во вложенных списках cdkDropLists

#angular #angular-cdk #angular-cdk-drag-drop

Вопрос:

Стекблитц, чтобы продемонстрировать проблему: https://stackblitz.com/edit/angular-ivy-tzyvbe?file=src/app/app.component.html

У меня есть внешняя группа CDKDROPLIST, а внутри два CDKDROPLIST.

В первом списке cdkDropList также есть два выпадающих списка.

Я хочу иметь возможность поместить элемент cdkDrag в первый список CDK, а также во вложенные списки CDK внутри него, если вы попадете в них.

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

Как я могу попасть внутрь вложенных дроплистов или это вообще возможно?

Ответ №1:

Вы должны использовать [cdkDropListConnectedTo] атрибут of cdkDropList для указания других подключенных контейнеров, в которые могут быть перенесены элементы контейнера. cdkDropListGroup делает это автоматически для своих детей. Вот отредактированный пример кода из вашего stackblitz.

 <div cdkDropListGroup>
  <div cdkDropList class="page-list-1" (cdkDropListEntered)="drop('page')">
    <div
      cdkDropList
      id="dropList1"
      class="page-list-2"
      (cdkDropListEntered)="drop('list-1')"
    ></div>

    <div
      cdkDropList
      id="dropList2"
      class="page-list-3"
      (cdkDropListEntered)="drop('list-2')"
    ></div>
  </div>

  <div
    cdkDropList
    [cdkDropListConnectedTo]="['dropList1', 'dropList2']"
    class="components"
  >
    <div cdkDrag class="item">Hi</div>
  </div>
</div>

1. Спасибо, в данном случае это работает. Я обновил свой стекблитц. У меня та же проблема, но теперь у меня есть свои списки в качестве компонентов. Кажется, что они не соединяются, когда они находятся в отдельных компонентах

2. Проблема заключается в жизненном цикле компонентов. Вы динамически генерируете идентификаторы в компонентах списка ngOnInit , позвольте родительскому компоненту определить все идентификаторы сразу и передать их в качестве входных данных компоненту списка для использования в качестве идентификатора cdkDropList. У вас также будет определенный список идентификаторов для [cdkDropListConnectedTo] без необходимости использования idService .

3. Также ваше (cdkDropListEntered) событие всегда регистрируется 'page' в консоли. Не позволяй этому одурачить тебя. Измените его на id переданный от родителя, чтобы убедиться, что он работает.

4. Хорошо, но прямо сейчас он получает идентификаторы от службы, которая получает обновленный список всякий раз, когда добавляется новый идентификатор (я согласен, что было бы лучше, чтобы родитель передавал идентификаторы детям, но cdkDropListConnectedTo в настоящее время получает обновленный массив идентификаторов. Может быть, это какая-то проблема с директивой cdkDropListConnectedTo, которая не обновляет идентификаторы должным образом при обновлении входных данных?

5. Я обновил его до. создайте идентификаторы, а затем передайте их в списки, но они все еще не могут попасть внутрь вложенных списков. (Я также исправил это, чтобы он регистрировал правильный идентификатор, а не просто «страницу»)