Как перетащить изображение с использованием angular материала?

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 drag & drop ожидает два списка для работы. Имейте в виду, что css для получения хорошего UX является очень важной частью установки . Ниже вы можете увидеть, что было бы необходимо (голые кости - вы можете увидеть более полный пример на stackblitz cdk fork , который я сделал из @ angular / material docs):

машинопись:

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>