角度拖放：拖放后项目不应从容器中移除答案

【问题标题】：Angular drag and drop: Items should not remove from container after drag and dropped角度拖放：拖放后项目不应从容器中移除
【发布时间】：2020-05-12 19:11:27
【问题描述】：

我正在使用 Angular 拖放 CDK：

我可以将项目从一个容器拖放到另一个容器，反之亦然。现在，我试图不从容器中移除丢弃的项目，但应该将它丢弃到另一个容器中。

正如您在图片中看到的，我想从 '“回家”拖动一个项目To do' 容器到 'Done' 容器。

我想保留物品掉落后。

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

任何帮助，请...

【问题讨论】：

我认为不可能通过角材料。您应该先复制要移动的元素，然后移动副本

标签： angular-material angulardraganddroplists

【解决方案1】：

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

<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

【讨论】：

感谢您的回答！。我正在寻找更好的方法。我不想复制项目。我只是拖放而不从容器中删除项目“待办事项”。

【解决方案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
      );
    }
  }

【讨论】：

有没有办法做到这一点，同时在拖动预览的同时保持原件原位？就像现在一样，你抓住它，它会暂时从原始列表中删除，然后你放下它，它会被添加到两个列表中。有没有办法防止它被暂时删除？
@user973223 正在寻找相同的解决方案，有更新吗？

【解决方案3】：

使用copyArrayItem 而不是transferArrayItem。
变化：

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

到

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

【讨论】：

【解决方案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...
}

【讨论】：