Angular 拖放：项目不应在拖放后从容器中移除

Question

我正在使用 Angular 拖放 CDK:

我能够将项目从一个容器拖放到另一个容器，反之亦然。现在，我试图不 从容器中移除 掉落的物品，但它应该是 dropped 放入另一个容器中。

如图所示，我想拖动一个项目"Go home" 从 'To do' 容器到 'Done'容器。

我想在掉落后保留一个物品。

示例： https://stackblitz.com/angular/bypeyxpbvxe?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html

任何帮助，请...

Answer 1

我认为 angular-material 不可能。这是一个可能的解决方案

<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}} <span (click)="copyMe(item)">Copy</span> </div>


 copyMe(item: any) {
    console.log(item)
    const newItem = item
    this.todo.push(newItem)
  }

Stackblitz：https://stackblitz.com/angular/xlkxgkneavr?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-group-example.ts

Answer 2

这很容易。只需使用 copyArrayItem 而不是 transferArrayItem

import {
  CdkDragDrop,
  copyArrayItem,
  moveItemInArray
} from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      copyArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

Answer 3

使用 copyArrayItem 而不是 transferArrayItem。
变化：

transferArrayItem(
    event.previousContainer.data,
    event.container.data,
    event.previousIndex,
    toIndex
);

到

copyArrayItem(
    event.previousContainer.data,
    event.container.data,
    event.previousIndex,
    toIndex
);

Answer 4

如果您不想在复制时删除该项目，请在 HTML:

中像这样使用 cdkDragStarted

(cdkDragStarted)="dragStarted($event, dataList, index)"

和方法：

dragStarted(event: CdkDragStart, dataList, index) {
 if (this.dropMode  === 'copy') {
   dataList.splice(index, 0, event.source.data);
 }
}

onDropped(event) {
  event.previousContainer.dataList.splice(event.previousIndex,1);

  // your code to copy the item...
}

Answer 5

我设法通过使用 cdkDragStarted 和 cdkDragDropped 完成了这项工作

HTML:

 <mat-row
        cdkDrag
        cdkDragHandle
        (cdkDragStarted)="dragStarted($event)"
        (cdkDragDropped)="dragStopped($event)"
    >
    </mat-row>

TS:

dragStarted(event: any) {
this.dataSource.data.splice(
  this.dataSource.data.findIndex(
    (d: TableRow) => d.ID === event.source.data[0].ID
  ) + 1,
  0,
  event.source.data[0]
);
this.table?.renderRows();
}

dragStopped(event: any) {
this.dataSource.data.splice(
  this.dataSource.data.findIndex(
    (d: TableRow) => d.ID === event.item.data[0].ID
  ),
  1
);
this.table?.renderRows();
}

Angular 拖放：项目不应在拖放后从容器中移除

Angular drag and drop: Items should not remove from container after drag and dropped

angular-material

angulardraganddroplists