Permitir posicionamento horizontal em cdkDropList
Em meu aplicativo, tenho várias linhas, dentro dessas linhas há "blocos" que podem ser arrastados entre as linhas, o que funciona perfeitamente.
No entanto, além de arrastar entre as linhas, gostaria de poder posicioná-las livremente na horizontal também.
Ao adicionar cdkDropListGroupe cdkDroplist, todos os elementos são alinhados automaticamente à esquerda.
Por exemplo; Gostaria que o "bloco" azul começasse onde o roxo termina usando cdkDragDrop.
Respostas
Isso, infelizmente, não é possível usar cdkDropListGroup. A documentação afirma especificamente que os elementos não podem ser arrastados livremente em um cdkDropList.
Quando fora de um elemento cdkDropList, os elementos arrastáveis podem ser movidos livremente pela página.
Você pode definir um valor inicial usando cdkDragFreeDragPositione encaixar o objeto em uma grade com o (cdkDragEnded)evento.
De acordo com a documentação, o que você está pedindo pode ser feito sem usar o cdkDropListGroup.
Em vez disso, você deve usar o cdkDrage [cdkDragFreeDragPosition].
O [cdkDragFreeDragPosition]recebe e o objeto do tipo {x: number, y: number}. Eles ditarão onde dentro do seu elemento os blocos aparecerão.
Dependendo de sua implementação, você pode simplesmente renderizar os elementos, um por um, e criar uma função que retorne as variáveis xe ypara cada elemento. Como alternativa, você pode criar uma matriz que contenha todos os valores de posicionamento padrão.
Por outro lado, parece que você deseja a propriedade de organização de lista das diretivas cdkDropListGroupe, cdkDropListao mesmo tempo em que tem a capacidade de definir uma posição inicial personalizada.
Isso não pode ser feito com a diretiva atual. O cdkDropListnão aceita a [cdkDragFreeDragPosition]entrada, portanto você não pode definir a posição no eixo x por conta própria.
Você precisaria desenvolver uma diretiva personalizada para permitir que isso ocorresse.
Atenciosamente.