CODEWITHSUNDEEP
angularangular-material
RIni
RIni

Reputation: 179

how to drag and drop an image using angular material?

I am accepting an image as an input and intend to drag and drop it to another container(in my case a div tag).However i am unable to do so. The following code shows:

<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<div class="box1" 
cdkDropList 
#image="cdkDropList" 
[cdkDropListConnectedTo]="nextblock"
(cdkDropListDropped)="onDrop($event)"
>
<img  id="blah" [src]="url" alt="your image" cdkDrag/>
</div>

<div  class="box2" cdkDropList #nextblock="cdkDropList" [cdkDropListConnectedTo]="'image'" (cdkDropListEntered)="setColor()">
Box1
</div>

Any idea on how can I implement it?

Upvotes: 1

Views: 4753

Answers (1)

julianobrasil
julianobrasil

Reputation: 9357

@angular/cdk drag&drop expects two lists for working. Keep in mind that the css for this to result in a good UX is a very important part of the setup. Below you can see what would be necessary (the bare bones - you can see a more complete example on the stackblitz cdk fork I've made from @angular/material docs):

typescript:

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

....

  list1: any[] = ['http://your-image-url'];
  list2: any[] = [];

  ...

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

template:

<div
    cdkDropList
    #list1List="cdkDropList"
    [cdkDropListData]="list1"
    [cdkDropListConnectedTo]="[list2List]"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let url of list1" cdkDrag>
        <img [src]="url" alt="your image"/>
    </div>
</div>


<div
    cdkDropList
    #list2List="cdkDropList"
    [cdkDropListData]="list2"
    [cdkDropListConnectedTo]="[list1List]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of list2" cdkDrag>
        <img [src]="url" alt="your image"/>
    </div>
</div>

Upvotes: 1

Related Questions