2

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 つのドロップ リストがあります:受信者送信者

リスト内には画像があり、画像を送信者リストから受信者リストに移動できます(逆ではありません)。

メソッドの typescript ソース コード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 Material ドラッグ アンド ドロップの「リスト間でのアイテムの転送」の標準的な動作です)。

私が必要としているのは、レシーバー dropList (rerange) 内のアイテムのシフト/移動動作を無効にすることです。

or で動きを無効にしようとしましたCSSが、何も機能していません。transform: translate3d(0px, 0px, 0px)transform:none

4

1 に答える 1