Angular 8 cdk拖放:将图片从列表拖放到可自由拖拽的区域
Angular 8 cdk拖放:将图片从列表拖放到可自由拖拽的区域
提问于 2020-07-08 14:39:39
我在右边有图像列表，我想从那里拖动特定的图像到容器或拖放区的右侧。
我试过在官方的cdk拖放中给出例子，但每个例子都是文本的。
到目前为止，我所做的是能够从左侧拖动图像，并能够将该图像路径推送到右侧列表中。相反，在右侧，我想要放置区域，以便从左侧拖动的任何图像都可以自由地放置在右侧的任何位置，并获得放置图像的X轴和Y轴。
可能的重复项："Angular cdk Drag drop" for drag items from list and drop to container (unordered)
下面是我的代码：
TS：
todo = [
'assets/Process_1.svg',
'assets/Document_1.svg',
'assets/Flow_1.svg'
];
done = [
'done'
];
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：
<div cdkDropListGroup>
<div class="sidebar">
<div class="example-container">
<h2>Shapes</h2>
<div cdkDropList [cdkDropListData]="todo" class="example-list" (cdkDropListDropped)="drop($event)">
<ul>
<li *ngFor="let item of todo">
<img src="{{item}}" cdkDrag>
</li>
</ul>
<!-- <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> -->
</div>
</div>
</div>
<div class="main-canvas">
<div class="example-container">
<h2>Done</h2>
<div cdkDropList [cdkDropListData]="done" class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
</div>
</div>我试图实现的是类似于流程图的东西。
回答 1
Stack Overflow用户
发布于 2020-10-21 10:34:00
您忘记了在img标记中应用src的属性绑定，并且在drop方法中提到了any类型。
<li cdkDrag *ngFor="let item of todo">
<img [src]="item" width="100" height="100">
</li>
drop(event: CdkDragDrop<any>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62797335
复制相关文章
相似问题
腾讯云开发者
