Angular Материал, вложенный перетаскиванием * ДЛЯ НЕИЗВЕСТНОГО ЧИСЛА cdkDragLists - PullRequest
Новая
       53

Angular Материал, вложенный перетаскиванием * ДЛЯ НЕИЗВЕСТНОГО ЧИСЛА cdkDragLists

0 голосов
/ 29 января 2020

Я пытаюсь сделать перетаскивание в приложении angular, где у меня есть 2 списка, один справа и один слева. Вот грубый визуальный элемент

Мне нужно иметь возможность перетаскивать (и копировать) элементы из левой группы в списки справа, которые разделены группами. В этом случае я перетаскиваю элемент списка .

. Мне также нужно иметь возможность изменить порядок элементов списка в их группах и переключать их между группами с правой стороны. У меня так много работы.

ЧТО МНЕ НУЖНО - это возможность переупорядочить ГРУППЫ, в которых хранятся элементы списка.

Я предполагаю, что у меня возникла эта проблема, потому что Я использовал cdkDropListGroup. Он автоматически соединяет любую из групп списков, и я не могу по отдельности перетаскивать элементы, сохраняя при этом возможность захватывать целые группы как группу. Я попытался выполнить рефакторинг для использования 

[cdkDropListConnectedTo]="list-one"

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

Мне просто не повезло, что я по сути вложил в тег cdkDropListGroup или есть способ справиться с этим, которого я не вижу?

Здесь - это вопрос ОЧЕНЬ похож на тот, что я задаю ... Я бы просто прокомментировал ответ, который был дан (который был неадекватен в моем случае), но у меня нет репутации, чтобы комментировать.

1 Ответ

0 голосов
/ 30 января 2020

Обязательно используйте событие $ внутри (cdkDropListDropped). По сути, вы можете достичь [cdkDropListConnectedTo] = "list-one", сопоставив TransferArrayItem между двумя списками. Поскольку непредсказуемое количество групп, пока ваше событие $ генерирует для каждого списка, вам должно быть хорошо с * ngFor реализацией

TS: 

drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
          moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
          transferArrayItem(event.previousContainer.data,
                            event.container.data,
                            event.previousIndex,
                            event.currentIndex);
        }
      }

HTML: 

<div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
...