CdkDrag свободное перетаскивание не работает внутри cdkDropList с использованием Angular, перетаскивание материала Angul ⇐ Javascript

[Гость]

Я попытался перетащить элемент с помощью cdkDrag (бесплатное перетаскивание куда угодно), и он работает без cdkDropList. Я могу поменять элемент между двумя контейнерами (Доступные услуги Контейнер Dropbox). Но функция бесплатного перетаскивания внутри контейнера Dropbox не работает при попытке использовать cdkDropList в качестве родительского контейнера с использованием Angular, перетаскивания материала Angular.

Ожидаемый результат: Пользователь может перетаскивать элемент в любое место внутри контейнера Dropbox cdkDropList.

Ссылка на Stackblitz

https://stackblitz.com/edit/stackblitz- ... %2Fmain.ts

Я пробовал использовать следующий код

Html-шаблон

Доступные услуги {{элемент}} Контейнер Dropbox {{элемент}} ts-файл

import { ChangeDetectorRef, Component } из '@angular/core'; Импортировать { CdkDragDrop, перемещениеItemInArray, передачаArrayItem, } из '@angular/cdk/drag-drop'; импортировать {BehaviorSubject} из 'rxjs'; @Компонент({ селектор: 'app-workflow-dashboard', templateUrl: './workflow-dashboard.comComponent.html', styleUrls: ['./workflow-dashboard.comComponent.scss'] }) класс экспорта WorkflowDashboardComponent { todo:any = ['Один', 'Два', 'Три']; готово: любой = ['Четыре']; конструктор (частное изменениеDetectionRef: ChangeDetectorRef) {} drop(событие: CdkDragDrop) { если (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } еще { TransferArrayItem( событие.предыдущийКонтейнер.данные, событие.контейнер.данные, event.previousIndex, событие.текущийИндекс, ); } } } SCSS
.service-container { граница: сплошная 1 пиксель #ccc; поле внизу: 25 пикселей; .доступный-сервис { граница: сплошная 1 пиксель #ccc; поле: 15 пикселей 0 15 пикселей 25 пикселей; } } .перечень услуг { минимальная высота: 90%; фон: белый; радиус границы: 4 пикселя; переполнение: скрыто; дисплей: блок; положение: относительное; } .service-box { поле: 7 пикселей 7 пикселей; ширина: 150 пикселей; высота: 50 пикселей; граница: сплошная 1 пиксель #ccc; цвет: rgba(0, 0, 0, 0,87); курсор: двигаться; дисплей: встроенный гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; выравнивание текста: по центру; фон: #fff; радиус границы: 4 пикселя; поле справа: 25 пикселей; положение: относительное; z-индекс: 1; размер коробки: граница-коробка; переход: box-shadow 200 мс кубический-безье (0, 0, 0,2, 1); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0,14), 0 1px 5px 0 rgba(0, 0, 0, 0,12); &: активный { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0,12); } } .cdk-drag-preview { размер коробки: граница-коробка; радиус границы: 4 пикселя; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0,12); } .cdk-drag-placeholder { непрозрачность: 0; } .cdk-drag-animating { переход: преобразование 250 мс кубического Безье (0, 0, 0,2, 1); } .service-граница { высота: 100%; }