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 · Accepted Answer · 2020-07-22 14:12:24Z

-1

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

answered Jul 22, 2020 at 14:12

Minal Shah

1,4861 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular CDK drag and drop to add new element not move

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related