如何将项目从列表拖放到区域中，但保持其放置位置答案

【问题标题】：How to Drag/Drop an item from a LIST into an AREA, but keeping its dropped position如何将项目从列表拖放到区域中，但保持其放置位置
【发布时间】：2023-03-12 09:45:01
【问题描述】：

Stackblitz 解决这个问题。这是我能得到的最接近的值。

我正在使用材质拖放。我正在寻找的结果是从列表中克隆一个项目并放入另一个列表中，该列表在视觉上是一个区域，但这是“捕获”，将丢弃的“坐标”（x，y）保留在该区域。

这是我的 HTML 代码：

<div class="wid-drawer" 
cdkDropList 
#widgetDrawer="cdkDropList"
cdkDropListSortingDisabled
[cdkDropListData]="widgetsDrawer" 
[cdkDropListConnectedTo]="[widgetDesktop]">

<widget-container 
    cdkDrag
    *ngFor="let widget of widgetsDrawer;"
    [widget]="widget"></widget-container>

<widget-container 
    *ngFor="let widget of widgetsOnDesktop; let widgetIndex = index;" 
    cdkDrag
    [widgetIndex]="widgetIndex"
    [widget]="widget"
    [cdkDragFreeDragPosition]="widget.dragPosition"
    [ngStyle]="{
        'transform':'translate3d('+widget.dragPosition.x+'px,'+widget.dragPosition.y+'px, 0)'
    }"
    [cdkDragData]="widget"
    (cdkDragEnded)="dragEnded($event, widgetIndex)"
    cdkDragBoundary=".wid-desktop"></widget-container>

这是我的 TS 代码：

widgetsOnDesktop: Widget[] = [];
widgetsDrawer: Widget[];

//.. more code

copyFromList(event: CdkDragDrop<any[]>) {
    console.log(event)

  if (event.previousContainer !== event.container) {

  copyArrayItem(
    event.previousContainer.data,
    event.container.data,
    event.previousIndex,
    event.currentIndex);

  this.widgetsOnDesktop[event.currentIndex].dragPosition = event.distance;
}

}

我正在设置项目位置：

this.widgetsOnDesktop[event.currentIndex].dragPosition = event.distance;

这个属性dragPosition是一个对象：{x: number, y, number}; 请注意，我在小部件容器中使用了 cdkDragFreeDragPosition 没有成功。

然后我继续使用 brute CSS 调整它的变换属性。这让我有点高兴，因为第一个拖动保持它的位置。但当我再次触摸该项目时，Drag&Drop API 会识别“列表”并将所有内容组合到一个列列表中。

列表是 cdkDropList 而区域是简单的 cdkDrop，我无法使其工作

我打算像Milanote：https://milanote.com/

这是我现在的项目：

【问题讨论】：

如果你提供一些模拟就好了，你想要的最终目标是什么。因为它很难理解你试图拖动什么以及哪里和哪里出了问题。
@PankajPrakash 我用 Stackblitz 编辑了这个问题。这里是：shorturl.at/dfkBX

标签： angular angular-material

【解决方案1】：

我相信这与您所追求的很接近。

两个调整：

将小部件定位更改为 absolute -- 使用 position: relative 进行转换会以不一致的方式重新定位小部件。
必须调整 translate -- 我不是这个库的专家，但看起来 nativeElement 转换属性设置为相对到用户选择的抽屉选项的位置（注意与您的示例中的 COLUMN 选项）。如果您添加更多选项，您可能需要根据选项在抽屉空间中的位置调整每个选项的 x,y。

希望这对您有所帮助和欢呼！

https://stackblitz.com/edit/angular-drag-drop-tsts-7uob2y?file=src%2Fapp%2Fshared%2Fcomponents%2Fwidgets%2Fcomponents%2Fboard%2Fboard.component.ts

【讨论】：