Angular 角度CDK拖放以添加新元素不移动

试图创建一个拖放布局创建者，但在angular CDK拖放库中遇到了几个问题。我有以下看法

我想做的是将小部件列表中的一个项目拖到卡中，然后根据小部件类型添加一个小部件。我的问题是，当我拖动卡片的cdkDropList时，它会将该项从小部件列表中移出，我不想这样做。以下是我的小部件列表代码：

<mat-list dense
        cdkDropList
        cdkDropListSortingDisabled>
        <mat-list-item class="widget-bar-item" *ngFor="let widget of widgets"
            cdkDrag
            [cdkDragData]="widget.type">
            <h3 matLine>{{ widget.title }}</h3>
            <p matLine>
              <span class="widget-list-description">{{ widget.description }}</span>
            </p>
            <mat-icon matListIcon cdkDragHandle class="mat-24">drag_indicator</mat-icon>
            <div *cdkDragPreview fxLayout="row" fxLayoutAlign="strat center">
                <mat-icon matListIcon class="mat-24">drag_indicator</mat-icon>
                <div fxLayout="column" fxLayoutAlign="start stretch">
                    <h3 matLine>{{ widget.title }}</h3>
                    <p matLine>
                        <span class="widget-list-description">{{ widget.description }}</span>
                    </p>
                </div>
            </div>
        </mat-list-item>
    </mat-list>

<div class="w-100-p h-100-p template-column" 
    fxLayout="column" 
    fxLayoutAlign="start stretch"
    cdkDropList
    cdkDrdopListOrientation="vertical"
    (cdkDropListDropped)="widgetDropped($event)">
    Column Widget is there
</div>

{{widget.title}

{{widget.description}}

阻力指示器
阻力指示器
{{widget.title}

{{widget.description}}

这是卡滴列表代码：

<mat-list dense
        cdkDropList
        cdkDropListSortingDisabled>
        <mat-list-item class="widget-bar-item" *ngFor="let widget of widgets"
            cdkDrag
            [cdkDragData]="widget.type">
            <h3 matLine>{{ widget.title }}</h3>
            <p matLine>
              <span class="widget-list-description">{{ widget.description }}</span>
            </p>
            <mat-icon matListIcon cdkDragHandle class="mat-24">drag_indicator</mat-icon>
            <div *cdkDragPreview fxLayout="row" fxLayoutAlign="strat center">
                <mat-icon matListIcon class="mat-24">drag_indicator</mat-icon>
                <div fxLayout="column" fxLayoutAlign="start stretch">
                    <h3 matLine>{{ widget.title }}</h3>
                    <p matLine>
                        <span class="widget-list-description">{{ widget.description }}</span>
                    </p>
                </div>
            </div>
        </mat-list-item>
    </mat-list>

<div class="w-100-p h-100-p template-column" 
    fxLayout="column" 
    fxLayoutAlign="start stretch"
    cdkDropList
    cdkDrdopListOrientation="vertical"
    (cdkDropListDropped)="widgetDropped($event)">
    Column Widget is there
</div>

专栏小部件就在那里

---

现在，widgetdroped（）函数只将数据打印到控制台。我知道我必须抓取数据并将其添加到我的布局中，但现在我正试图找出如何保持原始数据的位置，而不是实际移动它，并将其用作数据源。

根据我的个人经验，我建议您不要使用角度cdk拖放。 相反，你可以去喝一杯

它更易于使用并提供更多功能。 有关详细信息，请参阅以下链接