Angular CDK drag and drop to add new element not move

Question

Trying to make a drag and drop layout creator and getting stuck on a couple issues with the angular CDK drag and drop library. I have the following view

What I want to do is drag an item from the widget list into the card and then add a widget based on the widget type. My problem is that when I drag over the cdkDropList of the card it moves the item from the widget list and I dont want to do to. Here is my widget list code:

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

And here is the card droplist code:

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

Right now the widgetDropped() function only prints the data to the console. I know Ill have to grab the data and add it to my layout, but right now trying to figure out how to keep the origianl where it is and not actually move it and just use it as a source for data.

Minal Shah Minal Shah · Accepted Answer · 2020-07-22T14:12:24

From my personal experience I would suggest you not to use angular cdk drag and drop. Instead you can go for ng-dragula.

It is more easier to use and provides more functionalities. You can refer the following link for detailed information.

reference

Angular CDK drag and drop to add new element not move

1 Answers