希望拖动并替换元素，而不是附加每个元素

Question

我想拖放元素的副本，但无论何时拖动新元素，它都应该替换旧元素。

drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);     
} else {
let item:any = event.previousContainer.data[event.previousIndex];
let copy:any = JSON.parse(JSON.stringify(item));
let element:any = {};
for(let attr in copy){
if(attr == 'title') {          
element[attr] = copy[attr] += ' copy';
} else{
element[attr] = copy[attr];
}       
}
this.destination.splice(event.previousIndex,0,element);  
}
}

堆叠链路

Answer 1

在您的drop函数中，只需替换

//this.destination.splice(event.previousIndex,0,element); //<--replace this
//by 
this.destination=[element];

注意：如果你使用空的cdkDragPlaceholder，你会感觉更好的外观

在您的原始列表中

<div class="field-box" *ngFor="let item of origin" cdkDrag>{{item.title}}
<!--add this line -->
<div *cdkDragPlaceholder ></div>
</div>