Question

试图创建一个拖放式布局创建器，并陷入角度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（）函数仅将数据打印到控制台。我知道我必须抓取数据并将其添加到我的布局中，但是现在试图弄清楚如何将折纸保留在原处，而不是实际移动它，而只是将其用作数据源。

Answer 1

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

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

reference

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

1 个答案: