Как объединить перетаскивание материала Angular с виртуальной прокруткой?

Question

Я пытаюсь интегрировать виртуальную прокрутку материала Angular с помощью перетаскивания, но по какой-то причине, когда я пытаюсь реализовать это, он переворачивает элементы, а когда я пытаюсь перетащить элемент, он неработа.

Вот сводка кода

<cdk-virtual-scroll-viewport cdkDropList  itemSize="50" class="example-viewport">
  <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Как видите, я не сделал ничего особенного, кроме того, что я заменил *ngFor на cdkVirtualFor, потому что документы говорят мне, что:

*cdkVirtualFor заменяет *ngFor внутри <cdk-virtual-scroll-viewport>, поддерживая точно такой же API , что и *ngFor.

Я приложил здесь демонстрацию стекаблика !Итак, как интегрировать перетаскивание с виртуальной прокруткой?

Answer 1

Мне удалось заставить работать перетаскивание внутри виртуальной прокрутки с Angular 8.

<cdk-virtual-scroll-viewport itemSize="10" class="viewport">
  <mat-chip-list
    class="mat-chip-list-stacked"
    cdkDropList
    [cdkDropListData]="items"
    (cdkDropListDropped)="drop($event)">
    <mat-chip *cdkVirtualFor="let item of items" cdkDrag>
      {{ item.name }}
    </mat-chip>
  </mat-chip-list>
</cdk-virtual-scroll-viewport>

По какой-то причине moveItemInArray не включил обнаружение изменений в *cdkVirtualFor, как это былодля *ngFor.Итак, я добавил this.auditItems = [...this.auditItems]; к своему событию выпадения, и это, похоже, исправило его.

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    this.items = [...this.items];
}

Answer 2

Если вы ищете что-то похожее на изображение ниже, то вам нужно использовать код переноса предметов между кодами списков.Проверьте эту ссылку https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists

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

Вы также можете сделать 3 столбца или 4 столбца.Дайте мне знать, если вам понадобится, чтобы я предоставил вам код?

Answer 3

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

<cdk-virtual-scroll-viewport cdkDropList #virtualScroller 
  (cdkDropListDropped)="onItemDrop($event)"  itemSize="50" class="example-viewport">  
  <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

И код машинописного текста будет иметь:

@ViewChild('virtualScroller') virtualScroller: CdkVirtualScrollViewport;
...
onItemDrop(event: CdkDragDrop<FormViewOrderingItem>) {
    const vsStartIndex = this.virtualScroller.getRenderedRange().start;
    moveItemInArray(this.formViewOrdering, event.previousIndex + vsStartIndex, event.currentIndex + vsStartIndex);
}

Например, событие, пропущенное по капле при перемещении элемента с индексом 10 в индекс 12 списка, когда отображаемый диапазон 2-20, покажет {start: 8, end: 10}, поэтому при добавлении обработанного начального индекса оно исправляетпроблема.

Надеюсь, это поможет, у меня это сработало.

Answer 4

Мне очень жаль, но я думаю, что угловые материалы cdkDrag НЕ работают с виртуальной прокруткой , смотрите см. Связанный материал выпуск .

ПослеВ упомянутом потоке есть только одна демо , которая, кажется, работает, но предоставленные исходники , к сожалению, доступны только как скомпилированные js, а не ts.

Фактически вы должны сделатьрешение работать с угловыми перетаскиваниями с помощью cdkDrag ИЛИ угловыми скроллами с помощью виртуальной прокрутки .