角度材质拖放 - 拖动一个元素，在拖放时，它应该转换为另一个元素

Question

我已经浏览了角度材料拖放的文档。它主要处理可以拖放到另一个具有列表的容器的元素列表。

我有一个要求，我将从菜单中拖动span元素，它将转换为拖放容器中的img。我可以将任意数量的span元素拖放到同一个放置容器中。跨度应该是可重用的(不要从菜单列表中切断(。这可以用角度材料吗？请指教。

Answer 1

使用 Angular 材质是可能的。您只需要在放置容器中使用img-元素并调整放置方法即可。看看这个调整后的角度材料示例

组件.ts

drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
console.log('Moved ' + event.container.data[event.previousIndex]);
} else {
const randomImageUrl = 'https://picsum.photos/seed/' + Math.floor(Math.random() * 100) + '/380/100';
this.doneImageSources.push(randomImageUrl);
console.log('Converted Item ' + event.item.data + ' to ' + randomImageUrl);
}
}

组件.html

<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="originItems"
[cdkDropListConnectedTo]="[doneList]"
class="example-list">
<div class="example-box" *ngFor="let item of originItems"
cdkDrag
[cdkDragData]="item">
{{item}}
</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="doneImageSources"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<img *ngFor="let imgSrc of doneImageSources"
[src]="imgSrc"
class="example-box"
alt="Random Image"
cdkDrag>
</div>
</div>

这是一个堆栈闪电战：https://stackblitz.com/edit/angular-wculyd

希望这有帮助！ ：-(