cdkDropList не генерирует события - PullRequest
Новая
       28

cdkDropList не генерирует события

0 голосов
/ 04 апреля 2020

Я пытаюсь создать календарь с функцией перетаскивания, чтобы переместить встречи из дня в другой / изменить часы.

В настоящее время я пытаюсь сделать просмотр на неделю, поэтому для каждый день недели я создаю столбец с несколькими строками для часов.

Для каждого квартиля часа я хочу сделать cdkDropList, чтобы иметь возможность менять место своего расписания с шагом 15 минут.

Проблема в том, что я не получаю никаких событий от моих cdkDropList элементов.

Вот мой week-day-cell компонент: 

<div #dayCell class="day-cell">
  <div class="schedule-wrapper full-width">
    <ng-container *ngFor="let scheduleWrapper of schedulesOfDay.showedSchedulesWrappers; let i = index">
      <ng-container *ngIf="scheduleWrapper.isShowed">
        <div>
          <!-- Schedule -->
          <div class="schedule schedule-{{scheduleWrapper.schedule.id}}" cdkDrag
               [style.width.px]="getScheduleWidth(scheduleWrapper)"
               [style.height.px]="getScheduleHeight(scheduleWrapper)"
               [style.top.px]="getScheduleHeightOffset(scheduleWrapper)"
               [style.left.px]="getScheduleLeftOffset(scheduleWrapper)"
               [style.background]="scheduleWrapper.schedule.background"
               [cdkDragData]="scheduleWrapper"
               (cdkDragStarted)="onDragStart($event, scheduleWrapper)"
               (cdkDragMoved)="onDragMoved($event, scheduleWrapper)"
          >
            <div class="schedule-details">
              <div class="schedule-time">
                {{scheduleWrapper.schedule.start | date:"HH:mm"}}
              </div>

              <div class="schedule-text">
                Title
              </div>
            </div>
          </div>
        </div>
      </ng-container>
    </ng-container>
  </div>

  <div>
    <ng-container *ngFor="let hour of hours">
      <div class="hour">
        <ng-container *ngFor="let quartile of quartiles">
          <div class="quartile" cdkDropList
               [cdkDropListData]="schedulesOfDay.schedulesWrapper"
               [cdkDropListSortingDisabled]="true"
               (cdkDropListDropped)="drop($event)"
               (cdkDropListEntered)="onDragEntered($event)"
          >
          </div>
        </ng-container>
      </div>
    </ng-container>
  </div>

</div>

Только события из элемента cdkDrag выбрасываются.

В моем родительском компоненте у меня есть cdkDropListGroup: 

<div class="week-days-content" >
      <div class="row" cdkDropListGroup>
        <div *ngFor="let day of daysOfWeek" [style.minWidth]="cellWidth + 'px'" class="day-label">
          <app-week-day-cell
            *ngIf="showCalendar"
            [day]="day"
            [schedulesOfDay]="getSchedulesOfDay(day)"
            [hours]="hours"
            [cellWidth]="cellWidth">
          </app-week-day-cell>
        </div>
      </div>
    </div>

У кого-нибудь есть идея?

...