Проблемы с динамической высотой в CdkDropList

Я использую CdkDragDrop для создания динамической сетки, которую можно реструктурировать перетаскиванием от пользователя. Я создал этот StackBlitz, чтобы проиллюстрировать как свой вариант использования, так и проблему, с которой я столкнулся https://stackblitz.com/edit/angular-rvv4g9.

Когда у меня есть два элемента в одной строке, я хотел бы поместить один из элементов в пустую строку, чтобы разделить их и создать новую строку. Для этого я вставил пустые строки между всеми строками, когда вы перетаскиваете элемент, они отображаются на красном фоне. Поскольку элементы, которые я перетаскиваю, имеют довольно большую высоту, я бы хотел, чтобы пустые строки начинались с малых, а при вставке в них элементов заставляйте их расширяться.

Проблема, с которой я столкнулся, заключается в том, что если вы перетащите, например, элемент «1» через строку между ним и «3», вы увидите, что строка расширится, а затем продолжите перетаскивать «1» вниз под «3», и вы не можете бросить туда предмет.

Я думаю, что «область перетаскивания» не пересчитывается и блокируется другим элементом, который расширился.

Кто-нибудь знает, как пересчитать область перетаскивания или какой-либо другой способ, которым я мог бы решить эту проблему?


person Nait    schedule 27.02.2020    source источник


Ответы (1)


Для этого вы можете использовать настраиваемый заполнитель перетаскивания:

<div class="example-custom-placeholder" *cdkDragPlaceholder></div>

Смотрите мой Stackblitz:

https://stackblitz.com/edit/angular-vy9yvj

введите здесь описание изображения

person user2846469    schedule 01.03.2020