Предотвратить смещение / перемещение элементов в cdkDropList - Angular Материал - PullRequest
Новая
       110

Предотвратить смещение / перемещение элементов в cdkDropList - Angular Материал

0 голосов
/ 06 августа 2020

Я столкнулся с проблемой с библиотекой Drag and Drop в Angular Material (Angular 8).

Я разработал следующий код: 

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

Их 2 список отбрасывания: получатель и отправитель .

Внутри списков есть изображения, и я могу переместить изображение из списка отправителей в список получателей (не наоборот).

Машинописный исходный код метода drop: 

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

Когда я перетаскиваю img наведите receiver cdkDropList элементы получателя смещаются в зависимости от положения элемент, который в настоящее время перетаскивается (это стандартное поведение «Передача элементов между списками» в Angular Перетаскивание материала).

Мне нужно отключить поведение смещения / движения элементов внутри приемника dropList (переставить).

Я пытался отключить движение в CSS с помощью transform: translate3d(0px, 0px, 0px) или transform:none, но ничего не работает.

...