Search code examples
angularimagedrag-and-dropruntime-errorangular-cdk

The dragging and dropping of image Box

My Code of HTML file in angular9 is, I want to know where I have to make edits in my code to give preview of images in the browser at the place of broken images:

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

The code of my ts file is: 

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

.

I am able to move the image boxes, but I am not able to watch the preview of my images in the browser when I run the code. I have attached the image for your referenceThe image attached showing the error

Solution

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