I tried to drag and drop an item using cdkDrag (free drag and drop anywhere) and it’s working without cdkDropList. I can able to swap item between two container(Available Services <=> Dropbox Container). But free drag and drop feature inside Dropbox Container not working when tried with cdkDropList as parent container using Angular, Angular material drag and drop.
Expected result:
User can able to drag and drop item anywhere inside cdkDropList Dropbox Container.
Stackblitz Link
https://stackblitz-starters-djbrtx.stackblitz.io/
I tried with following code flow
Html Template
<div class="container">
<section class="service-container">
<div class="row" cdkDropListGroup>
<div class="col-2 available-service text-center">
<h4 class="pt-3">Available Services</h4>
<div
cdkDropList
[cdkDropListData]="todo"
class="service-list"
(cdkDropListDropped)="drop($event)">
<div class="service-box" *ngFor="let item of todo; let i = index"
cdkDrag
>
{{item}}
</div>
</div>
</div>
<div class="col">
<h2>Workspace</h2>
<div class="service-boundary"
cdkDropList
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)"
>
<div *ngFor="let item of done; let i = index" class="service-box"
cdkDrag
>
<strong>
{{item}}
</strong>
</div>
</div>
</div>
</div>
</section>
</div>
ts file
import { ChangeDetectorRef, Component } from '@angular/core';
import {
CdkDragDrop,
moveItemInArray,
transferArrayItem,
} from '@angular/cdk/drag-drop';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-workflow-dashboard',
templateUrl: './workflow-dashboard.component.html',
styleUrls: ['./workflow-dashboard.component.scss']
})
export class WorkflowDashboardComponent {
todo:any = ['One', 'Two', 'Three'];
done: any = ['Four'];
constructor(private changeDetectionRef: ChangeDetectorRef) {}
drop(event: CdkDragDrop<any[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex,
);
}
}
}
SCSS
.service-container {
border: solid 1px #ccc;
margin-bottom: 25px;
.available-service {
border: solid 1px #ccc;
margin: 15px 0 15px 25px;
}
}
.service-list {
min-height: 90%;
background: white;
border-radius: 4px;
overflow: hidden;
display: block;
position: relative;
}
.service-box {
margin: 7px 7px;
width: 150px;
height: 50px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
cursor: move;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px;
position: relative;
z-index: 1;
box-sizing: border-box;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
&:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.service-boundary {
height: 100%;
}