In my application I have multiple rows, within those rows are "blocks" that can be dragged between rows which works perfectly.
However, In addition to dragging between rows I'd like to be able to freely position them horizontally as well.
When adding cdkDropListGroup and cdkDroplist, all elements are automatically left aligned.
For example; I'd like the blue "block" to start where the purple one ends using cdkDragDrop.
According to the documentation what you are asking can be done without using the cdkDropListGroup.
Instead you should use the cdkDrag and [cdkDragFreeDragPosition].
The [cdkDragFreeDragPosition] receives and object of the type {x: number, y: number}. These will dictate where inside your element the blocks will appear.
Depending on your implementation, you could simply render the elements, one by one, and create a function that returns the x and y variables for each element. Alternatively, you could create an array that holds all the default placement values.
On a side note, it seems that you want the list organization property from the cdkDropListGroup and cdkDropList directives while simultaneously having the ability to set a custom starting position.
This cannot be done with the current directive. The cdkDropList does not accept the [cdkDragFreeDragPosition] input so you cannot set the position on the x-Axis yourself.
You would need to develop a custom directive to allow for such to occur.
Kind regards.
This, unfortunately, is not possible using cdkDropListGroup. The documentation specifically states elements can not be freely dragged around in a cdkDropList.
When outside of a cdkDropList element, draggable elements can be freely moved around the page.
You could set an initial value using cdkDragFreeDragPosition and snap the object to a grid with the (cdkDragEnded) event.
