Как создать несколько зон перетаскивания и передать переменную между ними - PullRequest
Новая
       52

Как создать несколько зон перетаскивания и передать переменную между ними

0 голосов
/ 29 марта 2020

Я пытаюсь создать календарь в Angular для личного проекта. У меня есть таблица с div для каждого дня месяца, и внутри этого div у меня есть мои встречи. Я хочу перетаскивать свою встречу из одного дня в другой, я пытаюсь с помощью angular cdk drag & drop, но у меня ничего не получается.

Вот ячейка моя таблица: 

<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 к телу моей таблицы (который показывает все дни)

И вот одна ячейка таблицы: 

<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 для каждого из моих расписаний. Проблема в том, что при перетаскивании из одной ячейки в другую в функции перетаскивания previousContainer и container совпадают, поэтому ничего не перемещается. (И я также печатаю в консоли день ячейки, в которой был удален элемент, и он всегда показывает день, в который было расписание перед перетаскиванием).

Мне кажется, проблема в следующем:

Когда я перемещаю элемент, мне нужно изменить дату этого элемента (потому что я делаю новый рендеринг своих элементов сразу после). Но я не могу получить указанный перемещенный элемент c из контейнера, я могу просто получить все элементы

1 Ответ

1 голос
/ 30 марта 2020

Одним из возможных способов создания нескольких зон перетаскивания является использование атрибута 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';

Работает Стекблит .

...