CODEWITHSUNDEEP
angulartypescriptdrag-and-dropangular-materialangular-cdk
mvp Sets
mvp Sets

Reputation: 129

Drag and drop between several lists

I have 4 lists of four different objects (A, B, C, D).

Is there a way to associate a name with each of these lists? In other words, list A being A, B being B ...

I intend to drag and drop an object and at the same time know which list it came from and where it went.

I used this to find out the automatically generated list value console.log ("FROM" + event.previousContainer.id) console.log ("TO" + event.container.id), the problem is that these values ​​sometimes vary, they are not always the same and if you use conditions it can stop working.

Is there a way to assign or always get the same name from the list where it is object and the one in which it was dropped?

Thanks

Demo- 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
      );
    }
  }

Upvotes: 0

Views: 1294

Answers (2)

Oussail
Oussail

Reputation: 2288

Since it's a list of elements and when drag and drop the element get add to the other list .

The easiest way to achieve what you want you need to add a key to each element in your list :

Keep in mind : It's not the best solution

Example : 

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 card-body for list 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>

Upvotes: 1

Leandro Matilla
Leandro Matilla

Reputation: 1011

Inside your drop function call this event data:

For the previous container:

event.previousContainer.element.nativeElement.id

For your current container:

event.container.element.nativeElement.id

Then in your HTML add an ID to the list element like that:

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

Upvotes: 1

Related Questions