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

Question

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

所以我有这个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, z: 0 } },
    { id: 5, label: 'Item 5', dragPosition: { x: 93, y: 142, z: 0 } }
  ];

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

  done = [
    { id: 4, label: 'Item 4', dragPosition: { x: 0, y: 0, z: 0 } },
    { id: 8, label: 'Item 8', dragPosition: { x: 0, y: 0, 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.previousIndex,
        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])
    };
  }
}

Answer 1

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

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

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

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

How to change an Angular Material CdkDroplist behavior to emulate a “free” dropzone?

angular

angular-material

angular-cdk-drag-drop