title: How to create multiple drag & drop zone and pass variable between them
body: <p>I'm trying to create a calendar in Angular for a personal project.
  I have a table with a div for each day of the month and inside this div I have my appointments. 
  What I want to do is be able to drag and drop my appointment from a day to another, I try with the angular cdk drag &amp; drop but can't have something working.</p>
  
  <p>Here is a cell of my table:</p>
  
  <pre><code>&lt;div #dayCell class="day-cell" cdkDropList (cdkDropListDropped)="drop($event)"&gt;
    &lt;div&gt;{{day.getDate()}}&lt;/div&gt;
    &lt;div class="schedule-wrapper full-width"&gt;
      &lt;div cdkDrag *ngFor="let schedule of schedules" class="schedule" [style.width.px]="getScheduleWidth(schedule)"&gt;
        &lt;div class="schedule-details"&gt;
          &lt;div class="schedule-text"&gt;{{schedule.title}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in the drop function I add a console log of the day used in the cell, when I drag my appointment from a day to another the day logged is always the day before dragging.</p>
  
  <p>Why ?</p>
  
  <p>And anyone know how I can pass my appointment from a cell to another ?</p>
  
  <p>EDIT: I'm trying to use the answer below but have some issues:</p>
  
  <p>I have added the <code>cdkDropListGroup</code> attribute to the tbody of my table (which show all the days)</p>
  
  <p>And here is one cell of the table:</p>
  
  <pre><code>&lt;div #dayCell class="day-cell" cdkDropList [cdkDropListData]="schedulesOfDay.schedulesWrapper" (cdkDropListDropped)="drop($event)"&gt;
    &lt;div&gt;{{day.getDate()}}&lt;/div&gt;
    &lt;div class="schedule-wrapper full-width"&gt;
  
      &lt;ng-container *ngFor="let scheduleWrapper of schedulesOfDay.schedulesWrapper"&gt;
        &lt;ng-container *ngIf="scheduleWrapper.isShowed"&gt;
          &lt;div &gt;
            &lt;div class="schedule" cdkDrag
                 [style.width.px]="getScheduleWidth(scheduleWrapper)"
                 [style.height.px]="20"
                 [style.top.px]="getScheduleHeightOffset(scheduleWrapper)"
                 [style.background]="scheduleWrapper.schedule.background"&gt;
            &gt;
              &lt;div class="schedule-details"&gt;
                &lt;div class="schedule-text"&gt;{{getScheduleTitle(scheduleWrapper)}}&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-container&gt;
      &lt;/ng-container&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the cdkDropList on the entire cell, and a cdkDrag for each of my schedules. 
  The problem is when I drag from a cell to another in the drop function the <code>previousContainer</code> and <code>container</code> are the same, so nothing is moved. (And I also print in console the day of the cell where the element is dropped and it always show the day where the schedule was before dragging).</p>
  
  <p>I think the problem is the following:</p>
  
  <p>When I move an element I need to change the date of this element (because I make a new render of my elements just after).
  But I can't get the specific moved element from the container, I can just have all the elements</p>