Need to drag and drop an item from left panel to right one

Question

I am new to Angular Material drag and drop feature, so kindly bear with me.

I have list of items on left panel. I need to drag an item and drop it on the right panel.

I don't need sorting in left panel list, only dragging and dropping it on right side. And when I drop the item, I need some change event to occur when that material is dropped.

I was able to use cdkDrag on left panel but don't know how to drop the item. I tried to use cdkDrop, but in vain.

Here is my sample code: https://stackblitz.com/edit/angular-cevn3d

Thanks.

Thanks @Quentin for the answer but I don't want my left panel to be sortable. I only should be able to drag an item from left side and drop it on the right side. And as soon as I drop the item on right side, I need to capture that change detection. Thanks — Mr. A

Quentin Quentin · Accepted Answer · 2019-09-18T13:51:46

Here is a possible solution made from the example given by Angular Material:

<div class="example-container">
  <h2>To do</h2>

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

I removed (cdkDropListDropped)="drop($event)" and [cdkDropListConnectedTo]="[todoList]" to not drop from right to left.

DEMO: Stackblitz

Need to drag and drop an item from left panel to right one

1 Answers