Angular CDK拖放添加新元素不移动答案

【问题标题】：Angular CDK drag and drop to add new element not moveAngular CDK拖放添加新元素不移动
【发布时间】：2020-07-22 14:06:50
【问题描述】：

尝试制作拖放式布局创建器，但遇到了 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>

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

【问题讨论】：

标签： angular angular-cdk

【解决方案1】：

根据我的个人经验，我建议您不要使用角度 cdk 拖放。相反，您可以选择 ng-dragula。

它更易于使用并提供更多功能。您可以参考以下链接了解详细信息。

reference

【讨论】：