3

I am facing with a problem with Drag and Drop library in Angular Material (Angular 8).

I developed the following code:

<div class="example-container">
    <div id="receiver-container" cdkDropListOrientation="horizontal" cdkDropList #receiver="cdkDropList"
      class="example-list" (cdkDropListDropped)="drop($event)" [cdkDropListConnectedTo]="[sender]" fxLayout="row"
      fxLayoutAlign="center center" fxLayoutGap="10px">
      <div class="example-box" *ngFor="let singleReceiver of receiverSrc" cdkDrag>
        <img class="img-images" [src]="singleReceiver">
      </div>
    </div>
  </div>


  <div class="example-container">
    <div id="sender-container" cdkDropListOrientation="horizontal" cdkDropList #sender="cdkDropList"
      class="example-list" (cdkDropListDropped)="drop($event)" [cdkDropListConnectedTo]="[receiver]" fxLayout="row"
      fxLayoutAlign="center center" fxLayoutGap="10px">
      <div class="example-box" *ngFor="let singleSender of senderSrc" cdkDrag>
        <img class="img-images-send" [src]="singleSender">
      </div>
    </div>
  </div> 

There are 2 dropping list: receiver and sender.

Inside the lists there are images and I can move an image from the sender list to the receiver list (not viceversa).

The typescript source code of the drop method:

drop(event: CdkDragDrop<string[]>) {
    console.log('Event: ', event);
    if (event.container.id === 'receiver-container' && event.previousContainer.id !== 'receiver-container') {
      if (event.currentIndex < this.receiverSrc.length) {
        //move item
        console.log('movement allowed');
        this.receiverSrc[event.currentIndex] = this.sanitizer.bypassSecurityTrustUrl(event.item.element.nativeElement.childNodes[0].src);
        console.log(event.item.element);
        this.senderSrc[event.previousIndex] = this.imagePlaceholder;
      }
    }
  }

When I drag the img hover the receiver cdkDropList the items of the receiver are shifted depending on the position of the item currently dragging (that is the standard behaviour of the "Transferring items between lists" in Angular Material Drag and Drop).

What I need is to disable shifting/movement behaviour of the items inside the receiver dropList (rearrange).

I tried to disable the movement in CSS with transform: translate3d(0px, 0px, 0px) or transform:none but nothing is working.

Wolfetto
  • 1,030
  • 7
  • 16

1 Answers1

1
.cdk-drag:not(.cdk-drag-preview) {
  transform: none !important;
}

Unfortunatly the item is still temporarelly deleted from the incoming list.