如何创建多个拖放区域并在它们之间传递变量

Question

我正在尝试在 Angular 中为个人项目创建日历。 我有一张桌子，每个月的每一天都有一个 div，在这个 div 里面我有我的约会。 我想要做的是能够将我的约会从一天拖放到另一天，我尝试使用角度 cdk 拖放但无法正常工作。

这是我表格的一个单元格：

<div #dayCell class="day-cell" cdkDropList (cdkDropListDropped)="drop($event)">
  <div>{{day.getDate()}}</div>
  <div class="schedule-wrapper full-width">
    <div cdkDrag *ngFor="let schedule of schedules" class="schedule" [style.width.px]="getScheduleWidth(schedule)">
      <div class="schedule-details">
        <div class="schedule-text">{{schedule.title}}</div>
      </div>
    </div>
  </div>
</div>

在放置功能中，我添加了单元格中使用的当天的控制台日志，当我将约会从一天拖到另一天时，记录的日期始终是拖动前一天。

为什么？

还有谁知道我如何将我的约会从一个牢房传递到另一个牢房？

编辑：我正在尝试使用下面的答案，但有一些问题：

我已将 cdkDropListGroup 属性添加到我的表格的 tbody 中（显示所有日期）

这是表格的一个单元格：

<div #dayCell class="day-cell" cdkDropList [cdkDropListData]="schedulesOfDay.schedulesWrapper" (cdkDropListDropped)="drop($event)">
  <div>{{day.getDate()}}</div>
  <div class="schedule-wrapper full-width">

    <ng-container *ngFor="let scheduleWrapper of schedulesOfDay.schedulesWrapper">
      <ng-container *ngIf="scheduleWrapper.isShowed">
        <div >
          <div class="schedule" cdkDrag
               [style.width.px]="getScheduleWidth(scheduleWrapper)"
               [style.height.px]="20"
               [style.top.px]="getScheduleHeightOffset(scheduleWrapper)"
               [style.background]="scheduleWrapper.schedule.background">
          >
            <div class="schedule-details">
              <div class="schedule-text">{{getScheduleTitle(scheduleWrapper)}}</div>
            </div>
          </div>
        </div>
      </ng-container>
    </ng-container>

  </div>
</div>

我在整个单元格上都有 cdkDropList，我的每个日程表都有一个 cdkDrag。 问题是当我在 drop 函数中从一个单元格拖动到另一个单元格时，previousContainer 和 container 是相同的，所以什么都没有移动。 （而且我还在控制台中打印元素被删除的单元格的日期，并且它始终显示在拖动之前日程安排所在的日期。

我认为问题如下：

当我移动一个元素时，我需要更改这个元素的日期（因为我在之后对我的元素进行了新的渲染）。 但是我无法从容器中获取特定的移动元素，我只能拥有所有元素

Answer 1

创建多个拖放区域的一种可能方法是在父元素上使用cdkDropListGroup 属性。

<div class="container" cdkDropListGroup>
    <app-calendar *ngFor="let date of dates" [date]="date"></app-calendar>
</div>

完成此设置后。您的 app-calendar 组件可以具有以下标记：

<div class="tasks" cdkDropList [cdkDropListData]="dayObj.schedules"
     (cdkDropListDropped)="drop($event)">
    <div *ngFor="let schedule of dayObj.schedules" cdkDrag>
        {{ schedule.title }}
    </div>
</div>

然后处理drop：

  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
      );
    }
  }

moveItemInArray 和 transferArrayItem 这两个方法来自这里：

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

工作stackblitz。