Question

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

我有一个要求，我将从菜单中拖动span元素，然后在放置的容器中将其转换为img。我可以将多个span元素拖放到同一个拖放容器中。该范围应可重复使用（不要从菜单列表中切除）。角度材料可以做到吗？请提出建议。

Answer 1

Angular Material是可能的。您只需要在放置容器中使用img元素并调整放置方法。看一下这个调整后的Angular Material示例

component.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);

  }
}

component.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

希望这会有所帮助！：-）

Angular Material拖放-拖放一个元素，并在拖放时应将其转换为另一个元素

1 个答案: