Question

我在右侧有图像列表，我想从那里将特定图像拖到容器或放置区域的右侧。

我已经尝试了在官方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>

我要实现的目标类似于流程图。

Answer 1

您忘记在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);
    }
  }

Angular 8 CDK拖放：将图像从列表拖动到可自由拖动的区域

1 个答案: