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

Question

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

这是我的 table:

的一个单元格

<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 属性添加到我的 table 的 tbody（显示所有日期）

这里是 table 的一个单元格：

<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(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。

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

How to create multiple drag & drop zone and pass variable between them

drag-and-drop

angular

angular-cdk