我正在使用Angular 拖放 CDK:
我能够将项目从一个容器拖放到另一个容器,反之亦然。现在,我试图不从容器中删除一个丢弃的项目,但它应该被放入另一个容器中。
正如您在图片中看到的,我想将“回家”项目从“待办事项”容器拖到“完成”容器中。
我想在丢弃后保留一个项目。
任何帮助,请...
我正在使用Angular 拖放 CDK:
我能够将项目从一个容器拖放到另一个容器,反之亦然。现在,我试图不从容器中删除一个丢弃的项目,但它应该被放入另一个容器中。
正如您在图片中看到的,我想将“回家”项目从“待办事项”容器拖到“完成”容器中。
我想在丢弃后保留一个项目。
任何帮助,请...
这很容易。只需使用 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
);
}
}
如果您不想在复制时删除该项目,请在您的 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...
}
使用copyArrayItem
而不是transferArrayItem
.
改变:
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
toIndex
);
至
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
toIndex
);
我不认为有角材料是可能的。这是一个可能的解决方案
<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)
}