Allow horizontal positioning in cdkDropList
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.
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.
- Time difference function giving negative value
- Why my form validation while logging in is not working?
- Angular 2 - subscribing to Observable.fromEvent error: "Invalid event target"
- New Angular @if template syntax is not working in my webapp
- Capacitor error with @capacitor-community/bluetooth-le
- Angular: How to programmatically trigger DOM events, like mouse click?
- parse json content of for key before use in angular 6 template
- The sort and URL update is getting stuck in infinite loop
- Transloco is not loading translations in Angular 17
- Angular Signals: programming semaphore
- How to inject component dynamically based on data type?
- Angular SSR hangs if OnInit subscribes to an observable
- sub-component does not display the Angular Material design of the containing component
- How to autoplay youtube component in Angular?
- typescript : variable is possibly 'undefined'.ts(18048)
- TypeError: Cannot read properties of undefined (reading 'filter') in Angular RxJS subscription
- In Angular, how to add Validator to FormControl after control is created?
- Using styleUrls instead of styleUrl in component Angular 17
- mat slider not working properly with dir="rtl"
- Scheduling Tasks in Angular 5
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
- Format date as dd/MM/yyyy using pipes
- Angular routing keeps previous component displayed and doesn't fully load the next one
- Deep links doesnt work when coming from the same website
- How to display formGroup when i use formArray
- Angular form doesn't validate if you don't leave the field before clicking
- Error deploying angular app with scripts to Vercel
- call method createUserWithEmailAndPassword without doing signIn
- Cypress for Angular library project
- Show only the first 2 bars on the Y-Axis using Chart.js?