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.