У меня есть сетка карт, реализованная с одной cdkDropList
на карту и одной cdkDrag
внутри:
<div cdkDropListGroup>
<div *ngFor="let card of grid">
<div cdkDropList (cdkDropListDropped)="drop($event)" [id]="[card.x, card.y]" style="position:relative;width:100%; height: 100%">
<div style="height:100%;" cdkDrag>
card
// A
</div>
</div>
</div>
// B
</div>
Это позволяет мне перемещать карты между их соответствующими позициями в сетке и показывать заполнители в ожидаемом месте выпадения карточек.
Теперь я хотел бы добавить несколько небольших предметов поверх карточек. Каждый из предметов должен принадлежать одной из карт, всякий раз, когда карта перемещается, предметы должны перемещаться вместе с ней, но также должна быть возможность перемещать предметы отдельно (внутри карты и между картами).
Я попытался поместить его как еще один cdkDrag
внутри cdkDrag
(A):
<div style="height:100%;" cdkDrag>
card
<div cdkDrag>
item
</div>
</div>
, но это испортило поведение внешнего cdkDropList
: теперь есть 2 cdkDrag
s внутри (даже если один находится внутри другого), cdkDropList
ведет себя так, как если бы он содержал два элемента, поэтому, когда я перемещаю только элемент, вся карта перемещается, чтобы освободить место для элемента.
С другой стороны, я попытался разместить cdkDrag
предмета за пределами cdkDropList
(B
): это позволяет предмету свободно перемещаться, но он больше не связан с какой-либо картой, особенно когда карта перемещается, элемент больше не перемещается.
Я также пробовал добавить дополнительный cdkDropList
внутри карты cdkDrag
, но тогда перемещения предметов между cdkDropList
картами не регистрируются, так как они принадлежат их вл n, отключен cdkDropList
s сейчас.
Я думаю, что в идеале у меня был бы метод, который бы отмечал внутренние cdkDrag
s как не запускающие переупорядочивание других элементов: возможно ли?
Это похоже на этот вопрос , но предложенные там решения: style="display:none"
на cdkDragPlaceholder
не работают в этом случае.