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 个下拉列表：接收者和发送者。

列表中有图像，我可以将图像从发送者列表移动到接收者列表（反之亦然）。

该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 Drag and Drop 中“在列表之间传输项目”的标准行为）。

我需要的是禁用接收器 dropList 中项目的移动/移动行为（重新排列）。

我试图CSS用transform: translate3d(0px, 0px, 0px)or 禁用运动，transform:none但没有任何效果。

4

1 回答 1

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

不幸的是，该项目仍然暂时从传入列表中删除。

于 2021-06-22T15:09:23.663 回答