Перетащите между несколькими списками - PullRequest
Новая
       14

Перетащите между несколькими списками

0 голосов
/ 20 февраля 2020

У меня есть 4 списка из четырех разных объектов (A, B, C, D).

Есть ли способ связать имя с каждым из этих списков? Другими словами, список A - это A, B - B ...

Я намерен перетащить объект и в то же время узнать, из какого он списка и куда он пошел.

Я использовал это, чтобы узнать автоматически сгенерированное значение списка console.log ("FROM" + event.previousContainer.id) console.log ("TO" + event.container.id), проблема в том, что эти значения иногда меняются, они не всегда одинаковы, и если вы используете условия, они могут перестать работать.

Есть ли способ присвоить или всегда получать одно и то же имя из списка, где находится объект и тот, в котором он был отброшен?

Спасибо

Демо - Stackblitz

.ts 

  drop(event: CdkDragDrop<string[]>) {
    console.log("FROM" + event.previousContainer.id)
    console.log("TO" + event.container.id)
    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
      );
    }
  }

Ответы [ 2 ]

1 голос
/ 20 февраля 2020

Внутри вашей drop функции вызовите данные этого события:

Для предыдущего контейнера:

event.previousContainer.element.nativeElement.id

Для ваш текущий контейнер:

event.container.element.nativeElement.id

Затем в вашем HTML добавьте идентификатор элемента списка следующим образом:

<div ... #activeList="cdkDropList" id="list-A" ...>

1 голос
/ 20 февраля 2020

Поскольку это список элементов, а при перетаскивании элемента добавьте его в другой список.

Самый простой способ достичь желаемого - добавить ключ к каждому элементу в списке:

Имейте в виду: Это не лучшее решение

Пример: 

A = [{
    name:"AA",
    belongTo: "A"
  },
  {
    name:"BB",
    belongTo: "A"
  },
  {
    name:"CC",
    belongTo: "A"
  },
  ];

  B = [{
    name:"RR",
    belongTo: "B"
  },
  {
    name:"PP",
    belongTo: "B"
  },
  {
    name:"QQ",
    belongTo: "B"
  },
  ];

HTML (тело карты div для списка A) : 

   <div class="card-body" style="overflow-y: auto;"  #activeList="cdkDropList"
      style="height:100%"
      class="box-list"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="A"
      [cdkDropListConnectedTo]="[inactiveList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let nw of A" cdkDrag >
          <div class="card mysmallCcards">             
            <div class="card-body">
                <span>{{nw.name}} => {{nw.belongTo}}</span>         
            </div>
          </div>
        </div>
      </div>
...