title: Multiple lists with drag & drop within group
body: <p>I have two <em>div</em>s in a parent component. And there are cards (components rendered in <em>div</em>s) in each of the above two divs. Each card has got a list of employees (also <em>div</em>s) from which I want to drag any across other cards within their own parent div. </p>
  
  <p>Below image shows how my page look like:</p>
  
  <p><a href="https://i.stack.imgur.com/vb432.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vb432.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>Below is my html for parent component with the Pickup &amp; Drop divs:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;h5 class="bg-primary text-white"&gt;Pickup&lt;/h5&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Pickup DIV --&gt;
  &lt;div class="row" cdkDropListGroup&gt;
      &lt;div class="col col-md-4" *ngFor="let item of pickupCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
          (cdkDropListDropped)="onDrop($event)"&gt;
          &lt;app-admin-special-request-allocation-card [allocatedCab]="item"
              (childevent)="onSpecialRequestReallocation($event)" cdkDrag&gt;
          &lt;/app-admin-special-request-allocation-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;h5 class="bg-primary text-white"&gt;Drop&lt;/h5&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Drop DIV --&gt;
  &lt;div class="row" cdkDropListGroup&gt;
      &lt;div class="col col-md-4" *ngFor="let item of dropCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
          (cdkDropListDropped)="onDrop($event)"&gt;
          &lt;app-admin-special-request-allocation-card [allocatedCab]="item"
              (childevent)="onSpecialRequestReallocation($event)" cdkDrag&gt;
          &lt;/app-admin-special-request-allocation-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my html for the individual cards/routes (app-admin-special-request-allocation-card.component.html)</p>
  
  <pre><code>&lt;div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2"&gt;
      &lt;div class="card-body text-center"&gt;
          &lt;div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert"
              *ngIf="isAllocated"&gt;{{message}}&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col text-right"&gt;
                  &lt;span&gt;&lt;b&gt;{{allocatedCab.AllocationStatusText}}&lt;/b&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'&gt;&lt;/i&gt;
                  &lt;br&gt;
                  &lt;b&gt;{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}&lt;/b&gt;
                  &lt;p&gt;&lt;b&gt;&lt;span&gt;{{allocatedCab.RouteType}}&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;p&gt;&lt;b&gt;&lt;span&gt;{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;p style="text-align: left"&gt;&lt;b&gt;&lt;span&gt;{{allocatedCab.VendorName}} -
                              {{allocatedCab.CabName}} - {{allocatedCab.RegNo}}&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;!-- employee list --&gt;
              &lt;div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees"&gt;
                  &lt;p style="text-align: left"&gt;&lt;span class="fa fa-user"&gt;&lt;/span&gt;
                      &lt;a href="./admin#" (click)="open(content,allocatedCab,employee)"&gt;
                          {{employee.FirstName}} {{employee.LastName}} -
                          &lt;small&gt; {{employee.PickupDate | date: "hh:mm a"}} &lt;/small&gt;
                      &lt;/a&gt;
                      &lt;i style="color:red; cursor: pointer;" class="fa fa-remove"
                          (click)="openConfirmation(content1, employee)"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 pt-2 text-left "&gt;
                  &lt;span&gt;{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>