带有（可选）动画的角度组件拖放

Question

我正在尝试构建一个主/仪表板页面，如下图所示。我想要实现的是能够拖放标记为 1-6 的组件（它们都是单独的组件）。我不确定是否可以使用有角度的 CDK 拖放来实现此功能。我想做的另一件事是有某种拖放动画，在页面加载时，一些组件会切换位置。

有人可以告诉我这是否可以使用 Angular CDK 拖放来实现，或者我是否需要使用一些外部包？

Answer 1

确实有点复杂，但是让我们开始吧。

分发一系列组件时我们首先需要考虑的是我们可以使用任何方式。我选择使用 Bootstrap 4 中的“masonary”（但您可以根据自己的选择进行制作）

当我们拖动 cdkList 并且它不是水平或垂直分布时，否则我们会遇到问题的“网格”。所以我选择创建一系列具有唯一元素的cdkDropList。但由于我不想在拖动时移动，因此拖动时我将其置于绝对位置。所以我们的数组项就像

[{data:1,style:null},{data:2,style:null}] 

当我们要拖动时，我们计算位置。为此，我们需要使用 ViewChildren 来获取 cdkDragList，但使用 {read:ElementRef} 因为我们只对 ElementRef 感兴趣

  @ViewChildren(CdkDropList,{read:ElementRef}) cards:QueryList<ElementRef>
  wrapperStyle={width:'',height:''}
  calculePosition()
  {
    let width=0;
    let height=0;
    this.cards.forEach((x,index)=>{
       const rect=x.nativeElement.getBoundingClientRect()
       if (width<rect.left+rect.width)
        width=rect.left+rect.width;
        if (height<rect.top+rect.height)
        height=rect.top+rect.height;

       this.items[index].style={
         position:'absolute',
         top:rect.top+'px',
         left:rect.left+'px',
         width:rect.width+'px',
         height:rect.height+'px'
       }
       this.onDrag=true;
    })
    this.wrapperStyle={width:width+'px',height:height+'px'}
  }

我们的 .html 可以像

<div [ngStyle]="onDrag?wrapperStyle:null" cdkDropListGroup 
        [ngClass]="onDrag?'position-relative':'card-columns'">
  <ng-container *ngFor="let item of items;let index=index">
    <div [ngStyle]="onDrag?item.style:null"
      cdkDropList
      orientation="vertical"
      cdkDropListSortingDisabled="true"
      [cdkDropListData]="index"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="card" cdkDrag (mousedown)="calculePosition()" >
        <div #place>
        </div>
        <div *cdkDragPlaceholder></div>
      </div>
    </div>
  </ng-container>
</div>

查看如何使用变量“onDrag”我们使用绝对位置或不使用绝对位置。另请参阅，我们将组件的“索引”作为“数据”。这让我们的函数 drop 变得像

  drop(event: CdkDragDrop<any,any>) {
    
    const currentIndex=event.container.data;
    const previousIndex=event.previousContainer.data;
    this.items=this.items.map((x,i)=>{

        if (i==previousIndex)
        return this.items[currentIndex]
        if (i==currentIndex)
        return this.items[previousIndex]
        return x
    })
    this.onDrag=false;
  }

只需要附加到我们的“#place”组件（基于“item.data”）

为此，首先使用 viewChildren 和 read:ViewContainerRef 并使用 AfterViewInit

  @ViewChildren('place', { read: ViewContainerRef }) places: QueryList<ViewContainerRef>
  ngAfterViewInit()
  {
    this.places.forEach((x,index)=>{
      switch (this.items[index].data)
      {
          case 0:
            x.createComponent(HelloComponent)
            break;
            default:
              x.createComponent(ByComponent)
              break;
        }
    })
  }

a 小stackblizt

注意：您只需要在本地存储中存储数组“items”即可“保存配置”