图片框的拖拽

Question

我在 angular9 中的 HTML 文件的代码是，我想知道我必须在我的代码中的哪里进行编辑，以便在浏览器中的图像损坏的地方预览图像：

<div cdkDropListGroup>
  <div class="box-container">
    <h2>TABLE A</h2>

    <div
      cdkDropList
      [cdkDropListData]="GridA"
      class="boxList"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="box" *ngFor="let item of GridA" cdkDrag>
        {{ item }}
      </div>
    </div>
  </div>
  <div class="box-container">
    <h2>TABLE B</h2>
    <div
      cdkDropList
      [cdkDropListData]="GridB"
      class="boxList"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="box" *ngFor="let item of GridB" cdkDrag>
        {{ item }}
      </div>
    </div>
  </div>
  <div class="box-container">
    <h2>TABLE C</h2>
    <div
      cdkDropList
      [cdkDropListData]="GridC"
      class="boxList"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="box" *ngFor="let item of GridC" cdkDrag>
        {{ item }}
      </div>
    </div>
  </div>
</div>

我的ts文件的代码是：

GridA = [
    'https://images.pexels.com/photos/3966779/pexels-photo-3966779.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3933273/pexels-photo-3933273.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/4450380/pexels-photo-4450380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3932695/pexels-photo-3932695.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  ];

  GridB = [
    'https://images.pexels.com/photos/4449319/pexels-photo-4449319.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3933042/pexels-photo-3933042.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3768998/pexels-photo-3768998.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3814272/pexels-photo-3814272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  ];

  GridC = [
    'https://images.pexels.com/photos/3932938/pexels-photo-3932938.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3755494/pexels-photo-3755494.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/4148847/pexels-photo-4148847.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/4148888/pexels-photo-4148888.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  ];

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
      );
    }
  }

。

我可以移动图像框，但是当我运行代码时，我无法在浏览器中观看我的图像预览。我已附上图片供您参考

Answer 1

工作 Stackblitz :- https://stackblitz.com/edit/angular-mghxdm

CSS :-

img {
  width: 100%;
  height: 30vh;
}

.box-container {
  display: inline-block;
  margin: 0 1em;
  width: 30%;
}

.placeHolder {
  width: 30vw;
  height: 30vh;
  background: #ccc;
  border: dotted 3px #999;
  min-height: 60px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.headers {
  font-weight: bold;
}
.headers div {
  width: 30%;
  display: inline-block;
  text-align: center;
  margin-bottom: 2em;
}

HTML :-

<div class="headers">
  <div>TABLE A</div>
  <div>TABLE B</div>
  <div>TABLE C</div>
</div>
<div cdkDropListGroup>
  <div class="box-container">

    <div id="list1"
      cdkDropList
      [cdkDropListData]="GridA"
      [cdkDropListConnectedTo]="['list2','list3']"
      class="boxList"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="box" *ngFor="let item of GridA">
        <span><div class="placeHolder" *cdkDragPlaceHolder></div><img [src]="item" cdkDrag></span>
      </div>
    </div>
  </div>
  <div class="box-container">
    <div id="list2"
      cdkDropList
      [cdkDropListData]="GridB"
      [cdkDropListConnectedTo]="['list1','list3']"
      class="boxList"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="box" *ngFor="let item of GridB">
        <span><div class="placeHolder" *cdkDragPlaceHolder></div><img [src]="item" cdkDrag></span>
      </div>
    </div>
  </div>
  <div class="box-container">
    <div id="list3"
      cdkDropList
      [cdkDropListData]="GridC"
      [cdkDropListConnectedTo]="['list1','list2']"
      class="boxList"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="box" *ngFor="let item of GridC">
        <span><div class="placeHolder" *cdkDragPlaceHolder></div><img [src]="item" cdkDrag></span>
      </div>
    </div>
  </div>
</div>

TS :-

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
GridA = [
    'https://images.pexels.com/photos/3966779/pexels-photo-3966779.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3933273/pexels-photo-3933273.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/4450380/pexels-photo-4450380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3932695/pexels-photo-3932695.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  ];

  GridB = [
    'https://images.pexels.com/photos/4449319/pexels-photo-4449319.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3933042/pexels-photo-3933042.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3768998/pexels-photo-3768998.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3814272/pexels-photo-3814272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  ];

  GridC = [
    'https://images.pexels.com/photos/3932938/pexels-photo-3932938.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/3755494/pexels-photo-3755494.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/4148847/pexels-photo-4148847.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    'https://images.pexels.com/photos/4148888/pexels-photo-4148888.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  ];

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

图片框的拖拽

The dragging and dropping of image Box

drag-and-drop

runtime-error

image

angular

angular-cdk