如何更改 Angular Material CdkDroplist 行为以模拟“自由”放置区？

如何解决如何更改 Angular Material CdkDroplist 行为以模拟“自由”放置区？

我们的目标是制作一个全宽的 dropzone。我可以在其中放置“小部件”并在放置区周围自由拖动它们。但不同的是，我也可以删除列表小部件，在其中我也可以删除其他小部件..

所以我有这个stackblitz 使用代码，this video 显示奇怪的行为

有什么帮助吗？ 我可以删除 cdkdroplist 指令并将所有内容假定为可拖动项，但会丢失元素上的列表功能...

同样的问题guy

app.component.html

<div
  cdkDropList
  id="todo"
  [cdkDropListData]="todo"
  [cdkDropListConnectedTo]="widgetIds"
  class="example-list board"
  (cdkDropListDropped)="drop($event)">

    <div class="example-Box widget item{{item.id}}"
      id="item{{item.id}}" 
      *ngFor="let item of todo" 
      cdkDrag
      (cdkDragreleased)="cdkDragreleased($event,item)"
      [cdkDragData]="item"
      [ngStyle]="{
                'transform': 'translate3d('+ item.dragPosition.x +'px,'+ item.dragPosition.y +'px,'+ item.dragPosition.z +'px)'
            }">{{item.label}}</div>
</div>

<div class="example-container widget widget-a">
  <h2>In Progress</h2>

  <div
    cdkDropList
    id="inprogress"
    [cdkDropListData]="inprogress"
    [cdkDropListConnectedTo]="widgetIds"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-Box item{{item.id}}"
      id="item{{item.id}}" 
      *ngFor="let item of inprogress" 
      cdkDrag
      (cdkDragreleased)="cdkDragreleased($event,item)"
      [cdkDragData]="item">{{item.label}}</div>
  </div>
</div>

<div class="example-container widget widget-b">
  <h2>Done</h2>

  <div
    cdkDropList
    id="done"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="widgetIds"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-Box item{{item.id}}"
      id="item{{item.id}}" 
      *ngFor="let item of done" 
      cdkDrag
      (cdkDragreleased)="cdkDragreleased($event,item)"
      [cdkDragData]="item">{{item.label}}</div>
  </div>
</div>

app.component.ts

export class AppComponent {
  widgetIds = ['todo','inprogress','done'];

  todo = [
    { id: 1,label: 'Item 1',dragPosition: { x: 45,y: 549,z: 0 } },{ id: 2,label: 'Item 2',dragPosition: { x: 190,y: 236,{ id: 5,label: 'Item 5',dragPosition: { x: 93,y: 142,z: 0 } }
  ];

  inprogress = [
    { id: 3,label: 'Item 3',dragPosition: { x: 0,y: 0,{ id: 6,label: 'Item 6',{ id: 7,label: 'Item 7',z: 0 } }
  ];

  done = [
    { id: 4,label: 'Item 4',{ id: 8,label: 'Item 8',z: 0 } }
  ];

  constructor() {}

  drop(event: CdkDragDrop<any>) {
    if (event.prevIoUsContainer === event.container) {
      moveItemInArray(
        event.container.data,event.prevIoUsIndex,event.currentIndex
      );
    } else {
      transferArrayItem(
        event.prevIoUsContainer.data,event.container.data,event.currentIndex
      );
    }
  }

  cdkDragreleased(event: CdkDragrelease<any>,item) {
    const widDomElement: any = document.querySelector(`.item${item.id}`);
    const el: any = document.querySelector(`.cdk-drag-preview.item${item.id}`);
    let arrT = el.style.transform
      .replaceAll('px','')
      .replaceAll(' ','')
      .replaceAll(')','')
      .replaceAll('translate3d(','')
      .split(',');

    item.dragPosition = {
      x: Number(arrT[0]),y: Number(arrT[1]),z: Number(arrT[2])
    };
  }
}

解决方法

这是 Material CDK 中的一个问题。团队解决了这个问题：

https://github.com/angular/components/commit/7508f46e7d1fd2eb0c20fdf8b913aacfcad5ea5a

https://github.com/angular/components/issues/22407