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的行为。之后，我将进行一些事件，以便在后端等上合并内容。

提示将不胜感激

Link to example in stackblitz

Answer 1

我能够找到解决方法。

我的同事提议在drop（event）中传递发生事件的项目

所以最终的解决方案是：

<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和其他解决方案

角度材质拖放-合并元素

1 个答案: