角度材质拖放 - 合并元素答案

【问题标题】：Angular material drag and drop - merge elements角度材质拖放 - 合并元素
【发布时间】：2020-03-16 16:31:37
【问题描述】：

我正在构建和应用程序，其中在一组列中呈现了多个项目。（为了演示，假设是 4 列）

我正在尝试实现将项目相互拖放的功能，这将导致这两个项目的合并。

typescript 数据结构

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

每当我现在在 drop 之后打印 event 时，我确实有当前容器的详细信息并移到了，但我需要有关我删除该元素的确切位置（在哪个 item.id 上）的信息，而不是让 item 逃避为默认 cdkDragDrop 行为。之后我会有一些事件来合并后端的东西等。

如果有提示，将不胜感激

Link to example in stackblitz

【问题讨论】：

将链接添加到我目前拥有的示例工作区

标签： angular typescript merge drag-and-drop angular-material-7

【解决方案1】：

我找到了解决办法。

我的同事建议传递drop(event)中发生事件的item

所以最终的解决方案是：

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

和处理（使用lodash）

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

更新堆栈闪电战。

但是整个解决方案还是有点笨拙，很难清楚地表明要合并到哪个元素并最终转移到其他解决方案ng-drag-drop。

每个项目都是可拖放的，效果更好（尽管需要额外搜索项目才能从列中删除它）

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

以及updated stackblitz 与其他解决方案

【讨论】：