Question

我正在使用角度拖放CDK ：

我能够将物品从一个容器拖放到另一个容器，反之亦然。现在，我尝试不要从容器中删除，但是应该将其放置到另一个容器中。

如您在图片中看到的，我要从 '中拖动 “回家” 要做 容器到 “完成” 容器。

我要在放下物品后。

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

任何帮助，请...

Answer 1

这很容易。只需使用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 2

使用copyArrayItem代替transferArrayItem。
更改：

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

到

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

Answer 3

我认为用角材料不可能。这是一个可能的解决方案

<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

角度拖放：拖放后不应从容器中删除项目

3 个答案: