Отключить переупорядочивание элементов в cdkDropList Angular - PullRequest
0 голосов
/ 11 июля 2020

У меня есть сетка карт, реализованная с одной 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 не работают в этом случае.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...