Angular перетаскивание материала - объединение элементов

Question

Я строю и приложение, где есть несколько элементов, отображаемых в наборе столбцов. (Для демонстрации, скажем, 4 столбца)

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

структура данных typescricpt

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

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

Итак, у меня есть компонент деталей с:

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

И компонентом столбца:

<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>

Сейчас я просто печатаю его

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

Всякий раз, когда я теперь печатаю event после удаления, у меня есть данные о текущем контейнере и перемещаются на него, но мне потребуется информация о том, где именно (на каком item.id) я сбросил этот элемент, и не заставляю элемент уклоняться как по умолчанию cdkDragDrop ведет себя. После этого у меня будут события для слияния вещей в backend et c.

И советы будут приветствоваться

Ссылка на пример в stackblitz

Answer 1

Мне удалось найти решение.

Моя коллега предложила передать предмет, по которому произошло событие в выпадающем (событие)

Таким образом, окончательное решение будет:

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

и обработка (с использованием loda sh)

drop(event: CdkDragDrop<Item[]>, dropedOn: Item) {
    const dragged = event.item.data;
    if (dragged.id != dropedOn.id) {
        dropedOn.text = dropedOn.text + "\n" + dragged.text;
        if (event.previousContainer === event.container) {
            _.remove(event.container.data,(item)=>item.id== dragged.id);
        } else {
           _.remove(event.previousContainer.data,(item)=>item.id== dragged.id);
        }
     }
  }

Обновлен блик стека.

Однако все решение было слишком неуклюжим, и было трудно четко определить, какой элемент был быть объединенным и в конечном итоге перенесенным в другое решение из столбца)

<div *ngFor="let item of column.items;" style="margin-top: 2px">
    <div draggable [dragData]="item" droppable (onDrop)="onItemDrop($event,item)">
            <item [item]="item"></item>
    </div>
</div>

И Обновлен стек-блиц с другим решением