角度拖放:拖放后项目不应从容器中移除

The*_*ock 3 angular-material angulardraganddroplists

我正在使用Angular 拖放 CDK

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

在此输入图像描述

正如您在图片中看到的,我想将项目“回家”“待办事项”容器拖动到“完成”容器。

我想保留掉落后的物品。

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

有什么帮助,请...

小智 8

这很容易。只需使用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
      );
    }
  }
Run Code Online (Sandbox Code Playgroud)

  • 有没有办法做到这一点,同时在拖动预览时将原件保持在原位?就像现在一样,您抓住它,它会暂时从原始列表中删除,然后您放下它,它会添加到两个列表中。有没有办法防止它被暂时删除? (10认同)