Angular material drag and drop - merge elements

问题

I'm building and app where there are multiple items rendered in set of columns. (For sake of demonstration let's say 4 columns)

I'm trying to achieve functionality of dragging and dropping items onto each other which will result in merge of those two items.

typescricpt data structure

Details{
     id:number;
     columns:Column[];
}

Column{
     id:number;
     item:Item[];
}
Item{
     id:number;
     text:string;
}

So I have details component with :

<div fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="5px" cdkDropListGroup>
  <column *ngFor="let column of details.columns" [column]="column" fxFlex>
  </column>
</div>

And column component:

<div>
    Column Header
</div>
<div cdkDropList 
     (cdkDropListDropped)="drop($event)" 
     [cdkDropListData]="column.items"
     *ngFor="let item of column.items">
  <item cdkDrag [item]="item" [cdkDragData]="item">
  </item>
</div>

For now I just print it

drop(event: CdkDragDrop<Item[]>) {
   console.log(event);
}

Whenever I now print event after drop , I do have details of current container and moved onto , but I would require information about where exactly ( on which item.id ) I dropped that element, and not make item evade as default cdkDragDrop behaves. Afterwards I would have events for merging stuff on backend etc.

And hints would be appreciated

Link to example in stackblitz

来源：https://stackoverflow.com/questions/60709758/angular-material-drag-and-drop-merge-elements

标签

angular