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

对于这个问题。那是我能得到的最接近的了

我正在使用材质拖放。 我正在寻找的结果是从一个列表中克隆一个项目并放入另一个列表中，该列表在视觉上是一个区域，但这就是“捕获”，将删除的“坐标”（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>

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;
}

此属性dragPosition是一个对象：{x:number，y，number}； 请注意，我在widget容器中使用了cdkDragFreeDragPosition 没有成功

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

如果列表是cdkDrop列表，而区域是简单的cdkDrop，则无法使其正常工作

我打算这样做：

这是我现在的项目：

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

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

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;
}

---

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

两项调整：

将小部件定位更改为

绝对

——使用

位置转换：相对

以不一致的方式重新定位小部件

必须调整

转换

——我不是这个库的专家，但看起来nativeElement转换属性是相对于用户选择的抽屉选项的位置设置的（示例中的注释与列选项）。如果添加更多选项，则可能必须根据选项在抽屉空间中的位置调整每个选项的x、y

希望这对你有帮助，干杯

---

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