angular - Angular CDK拖放添加新元素不移动

问题描述

试图制作一个拖放布局创建者，但遇到了一些与角度 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>

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

标签： angularangular-cdk

angular - Angular CDK拖放添加新元素不移动

问题描述

解决方案

推荐阅读