Multiple lists with drag & drop within group - html

Question

I have two divs in a parent component. And there are cards (components rendered in divs) in each of the above two divs. Each card has got a list of employees (also divs) from which I want to drag any across other cards within their own parent div.
Below image shows how my page look like:
I want the page to be able to drag employees within Pickup or Drop. For eg: move Employee1 from {Place1 To Place2} to {Place3 To Place2} I have used cdkDropList/cdkDrag, however I could not drag anything at all.
Below is my html for parent component with the Pickup & Drop divs:
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Pickup</h5>
</div>
</div>
<!-- Pickup DIV -->
<div class="row" cdkDropListGroup>
<div class="col col-md-4" *ngFor="let item of pickupCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
(cdkDropListDropped)="onDrop($event)">
<app-admin-special-request-allocation-card [allocatedCab]="item"
(childevent)="onSpecialRequestReallocation($event)" cdkDrag>
</app-admin-special-request-allocation-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Drop</h5>
</div>
</div>
<!-- Drop DIV -->
<div class="row" cdkDropListGroup>
<div class="col col-md-4" *ngFor="let item of dropCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
(cdkDropListDropped)="onDrop($event)">
<app-admin-special-request-allocation-card [allocatedCab]="item"
(childevent)="onSpecialRequestReallocation($event)" cdkDrag>
</app-admin-special-request-allocation-card>
</div>
</div>
Below is my html for the individual cards/routes (app-admin-special-request-allocation-card.component.html)
<div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2">
<div class="card-body text-center">
<div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert"
*ngIf="isAllocated">{{message}}</div>
<div class="row">
<div class="col text-right">
<span><b>{{allocatedCab.AllocationStatusText}}</b></span>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'></i>
<br>
<b>{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}</b>
<p><b><span>{{allocatedCab.RouteType}}</span></b></p>
</div>
<div class="row">
<p><b><span>{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}</span></b></p>
</div>
<div class="row">
<p style="text-align: left"><b><span>{{allocatedCab.VendorName}} -
{{allocatedCab.CabName}} - {{allocatedCab.RegNo}}</span></b></p>
</div>
<!-- employee list -->
<div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees">
<p style="text-align: left"><span class="fa fa-user"></span>
<a href="./admin#" (click)="open(content,allocatedCab,employee)">
{{employee.FirstName}} {{employee.LastName}} -
<small> {{employee.PickupDate | date: "hh:mm a"}} </small>
</a>
<i style="color:red; cursor: pointer;" class="fa fa-remove"
(click)="openConfirmation(content1, employee)"></i></p>
</div>
</div>
<div class="row">
<div class="col-md-6 pt-2 text-left ">
<span>{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}</span>
</div>
</div>
</div>
</div>

Answer 1

I think there is a mistake in your code. The cdkDropList attribute is placed in the wrong div. And the cdkDrag attribute should be given to the exact div which can be draggable. So only give cdkDropListGroup attribute in parent div and place cdkDropList attribute inside the card component. ie.
You don't need cdkDropList attribute and the following code in that element in your parent div (Pickup and Drop).
Instead, add it in app-admin-special-request-allocation-card.component.html to a new wrapping div over the employee list div.
Add the cdkDrag attribute to exact div in which employee name is rendered.
try the below code.
Parent Component
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Pickup</h5>
</div>
</div>
<div class="row" cdkDropListGroup>
<!-- remove the 'cdkDropList' attribute and [cdkDropListData]=" from below div -->
<div class="col col-md-4" *ngFor="let item of pickupCabs">
<app-admin-special-request-allocation-card [allocatedCab]="item" (childevent)="onSpecialRequestReallocation($event)">
</app-admin-special-request-allocation-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Drop</h5>
</div>
</div>
<div class="row" cdkDropListGroup>
<!-- remove the 'cdkDropList' attribute and [cdkDropListData]=" from below div -->
<div class="col col-md-4" *ngFor="let item of dropCabs">
<app-admin-special-request-allocation-card [allocatedCab]="item" (childevent)="onSpecialRequestReallocation($event)">
</app-admin-special-request-allocation-card>
</div>
</div>
Card Component
<div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2">
<div class="card-body text-center">
<div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert" *ngIf="isAllocated" >{{message}}</div>
<div class="row">
<div class="col text-right" >
<span><b>{{allocatedCab.AllocationStatusText}}</b></span>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'></i>
<br>
<b>{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}</b>
<p><b><span>{{allocatedCab.RouteType}}</span></b></p>
</div>
<!-- Add the cdkDropList attribute and drop list data here -->>
<div class="col-md-9 border-bottom" cdkDropList [cdkDropListData]="allocatedCab.AssignedEmployees" (cdkDropListDropped)="drop($event)">
<div class="row">
<p><b><span>{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}</span></b></p>
</div>
<div class="row">
<p style="text-align: left"><b><span>{{allocatedCab.VendorName}} - {{allocatedCab.CabName}} - {{allocatedCab.RegNo}}</span></b></p>
</div>
<!-- Add cdkDrag attribute here -->>
<div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees" cdkDrag>
<p style="text-align: left"><span class="fa fa-user"></span>
<a href="./admin#" (click)="open(content,allocatedCab,employee)">
{{employee.FirstName}} {{employee.LastName}} -
<small> {{employee.PickupDate | date: "hh:mm a"}} </small>
</a>
<i style="color:red; cursor: pointer;" class="fa fa-remove" (click)="openConfirmation(content1, employee)"></i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 pt-2 text-left ">
<span>{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}</span>
</div>
</div>
</div>
</div>
It is not mandatory to give cdkDropListGroup and cdkDropList in the same component. When the above code is rendered in the browser, the structure of the cdkDropListGroup and cdkDropList will be set as parent and child relation. So I hope, you may get what you require.