Question

我接受图像作为输入，并打算将其拖放到另一个容器（在我的情况下为div标签）。但是我无法这样做。以下代码显示：

<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<div class="box1" 
cdkDropList 
#image="cdkDropList" 
[cdkDropListConnectedTo]="nextblock"
(cdkDropListDropped)="onDrop($event)"
>
<img  id="blah" [src]="url" alt="your image" cdkDrag/>
</div>

<div  class="box2" cdkDropList #nextblock="cdkDropList" [cdkDropListConnectedTo]="'image'" (cdkDropListEntered)="setColor()">
Box1
</div>

关于如何实现它的任何想法？

Answer 1

@ angular / cdk拖放操作需要两个列表。请记住，css可以产生良好的用户体验，这是该设置的非常重要的部分。在下面您可以看到需要做的事情（裸露的骨头-您可以在我从@ angular / material docs制作的stackblitz cdk fork上看到一个更完整的示例）：

打字稿：

import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

....

  list1: any[] = ['http://your-image-url'];
  list2: any[] = [];

  ...

  drop(event: CdkDragDrop<string[]>) {
    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);
    }
  }

模板：

<div
    cdkDropList
    #list1List="cdkDropList"
    [cdkDropListData]="list1"
    [cdkDropListConnectedTo]="[list2List]"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let url of list1" cdkDrag>
        <img [src]="url" alt="your image"/>
    </div>
</div>


<div
    cdkDropList
    #list2List="cdkDropList"
    [cdkDropListData]="list2"
    [cdkDropListConnectedTo]="[list1List]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of list2" cdkDrag>
        <img [src]="url" alt="your image"/>
    </div>
</div>

如何使用角形材质拖放图像？

1 个答案: