Перетаскивание окна изображения - PullRequest
Новая
       120

Перетаскивание окна изображения

0 голосов
/ 29 мая 2020

Мой код файла HTML в angular9: я хочу знать, где мне нужно внести изменения в свой код, чтобы обеспечить предварительный просмотр изображений в браузере на месте битых изображений: 

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

.

Я могу перемещать поля изображений, но я не могу просматривать предварительный просмотр своих изображений в браузере, когда я запускаю код. Я приложил изображение для справки The image attached showing the error

1 Ответ

1 голос
/ 29 мая 2020

Рабочий стекблитц: - 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
      );
    }
  }
}
...