Enable horizontal placement within cdkDropList

Within my application, there are multiple rows each containing draggable "blocks". These blocks can be moved between rows effortlessly. However, I am looking to enhance the functionality by allowing these blocks to be freely positioned horizontally as well.

https://i.sstatic.net/laAQZ.png

Upon adding cdkDropListGroup and cdkDroplist, all elements default to being left aligned. What I aim for is to use cdkDragDrop to have the blue block start where the purple one ends, enabling precise horizontal positioning.

angulartypescriptangular-materialangular-cdk

Answer №1

Regrettably, accomplishing this task using cdkDropListGroup is not feasible. According to the documentation, it clearly states that elements cannot be freely dragged within a cdkDropList.

However, when outside of a cdkDropList element, draggable items can be moved around the page without restrictions.

To achieve similar functionality, you could establish an initial position using cdkDragFreeDragPosition and then snap the object to a grid utilizing the (cdkDragEnded) event.

Answer №2

The documentation explains that achieving your desired functionality does not require using the cdkDropListGroup.

Instead, it suggests utilizing the cdkDrag along with [cdkDragFreeDragPosition].

With the [cdkDragFreeDragPosition], you can specify coordinates in an object of type {x: number, y: number}, determining where each block will be positioned within the element.

Depending on how you implement this, you can render elements individually and create a function to determine the values for x and y. Alternatively, you could store default placement values in an array.

If you are aiming to combine the list organization feature of cdkDropListGroup and cdkDropList with setting custom starting positions, the current directive does not support this.

Since cdkDropList does not accept input from [cdkDragFreeDragPosition], manually adjusting the position on the x-axis is not possible.

To achieve this combination, developing a custom directive would be necessary.

Best regards.

Answer №3

The latest update to the CDK drag/drop directive now includes horizontal functionality for posterity

cdkDropListOrientation="horizontal"

Here's an example:

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
</div>

Check out more details on list orientation here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the concealed mat-option once all other options have been filtered out

My current task involves dynamically creating multiple <mat-select> elements based on the number of "tag types" retrieved from the backend. These <mat-select> elements are then filled with tag data. Users have the ability to add new "tag types, ...

htmlangulartypescriptangular-materialngrx

Unique: "Unique styling for Ionic on emulator versus web localhost"

My perception of CSS codes in browsers versus emulators differs. I believe that currently, CSS codes only work properly in browsers. For instance, I attempted to change -ion-background-color for .md body and iosbody. However, the emulator still displays t ...

node.jsangularionic-frameworkionic4ionic5

Mapping a list of records by a nested attribute using Typescript generic types

In my current project, I am implementing a unique custom type called "RecordsByType", which is currently undefined in the code snippet below. Within this snippet, I have various types that represent database records, each with its type defined within a ne ...

typescripttypestypescript-typingstypescript-generics

The HTTP DELETE request encountered a TypeError, stating that error.json is not a valid function

Within my Angular application, there is a feature that involves a "delete button". When this button is clicked, a confirmation popup appears asking the user if they are certain they want to proceed with the deletion. If the user confirms by clicking ' ...

angulartypescripthttp-delete

After ngAfterViewInit, the @ViewChild element has not been defined

@ViewChild('videoPlayer') myVidElement: ElementRef; There is an HTML5 video element in the markup with the ViewChild specified as above However, I am facing an issue where the element is not accessible and is logged as undefined in both ngOnIni ...

angular

TS2531: Potentially null object

I am facing an issue in my React-TypeScript project with the following code snippet. Despite having null checks, I am still getting an error "object is possibly null" while running the app. The error specifically occurs in the last part of the if conditio ...

reactjstypescriptreact-typescript

Deciphering the Mysteries of API Gateway Caching

It seems like a common pattern to enable an API Gateway to serve an Angular Webapp by pulling it from S3. The setup involves having the API gateway with a GET request set up at the / route to pull index.html from the appropriate location in the S3 bucket, ...

angularamazon-web-servicesamazon-s3cachingaws-api-gateway

Looking for a way to search for contacts by number in Nativescript? Learn how to use the `getContactsByNumber(number

Using the nativescript-contacts plugin with nativescript 5.0, Angular, and webpack. Is there a way to retrieve the contact name based on the phone number? The main issue is that I want to display a list of recent phone calls, but there is one problem. L ...

angulartypescriptnativescript

Tips for simulating JSON import using Jest in TypeScript

When it comes to unit testing in Typescript using Jest, I am looking to mock a .json file. Currently, I have a global mock set up inside my jest.config.js file which works perfectly: 'package.json': '<rootDir>/__tests__/tasks/__mocks ...

javascripttypescriptunit-testingjestjs

Is it possible for users to customize the window size in an Angular 8 application?

Hello everyone, I'm new to Angular and this is my first time posting on stackoverflow. So please be kind! ...

angulartypescriptresizewindow

Encountering an issue with React Redux and Typescript involving the AnyAction error while working on implementing

While integrating redux-persist into my React project, I encountered an error. Previously, Redux was working smoothly, but upon the addition of redux-persist, I started receiving this error message: Types of property 'dispatch' are incompatib ...

javascriptreactjstypescriptreduxreact-redux

Is it possible to make *ngIf in Angular run just one time?

I am facing a minor issue - I need to implement roles validation in my Angular application. The structure of the application consists of pages, each containing multiple components. User privileges are assigned at the component level, making it necessary to ...

angulartypescriptpermissions

Choose does not showcase the updated value

My form contains a form control for currency selection Each currency object has the properties {id: string; symbol: string}; Upon initialization, the currency select component loops through an array of currencies; After meeting a specific condition, I need ...

htmlangulartypescriptforms

What is the proper way to define a tuple type with a specific size N for the vector class in C++?

I am seeking to create a tuple type with a fixed size N, allowing for functionality such as: let tuple: Tuple<string, 2> = ["a","b"] In this scenario, "number" represents the type T, and "2" denotes the size N. Subsequently, I ai ...

typescripttypescript-generics

tsc failing to generate the distribution folder

I've encountered a strange issue with compiling my TypeScript project into the ./bin folder. The tsc command runs without any errors, but nothing is actually being created in the designated folder. It's puzzling me and I can't seem to figure ...

javascriptnode.jstypescript

After utilizing the nativescript command "tns create my-tab-ng --template tns-template-tab-navigation-ng," there was no webpack.config.js file generated

Whenever I attempt to execute the command tns run android while my device is connected to my computer, an error message pops up stating that the webpack.config.js file cannot be located. I initialized the project using the command tns create my-tab-ng -- ...

angularwebpacknativescriptangular2-nativescriptnativescript-angular

Using ExpressJS with TypeScript: Understanding Request Context

In my TypeScript project, I have encountered certain restrictions when it comes to passing variables through middlewares. Initially, I tried redefining requests using interfaces, but this approach felt implicit and could potentially lead to new problems. ...

expresstypescriptrequest

Create a Typescript React class and define the State type as either an interface or null

When working with React and typescript, it is common to declare state types in the following manner: import * as React from "react" interface IState { someState: string } class MyClass extends React.Component<{}, IState> { state = { someSt ...

reactjstypescript

Unable to access the inner object using key-value pair in Angular when working with Firebase

Within my json object, there is an inner object labeled data, containing {count: 9, message: "9 sites synced"} as its contents - also in json format. My objective is to extract the value from message, rather than count. Provided below is the temp ...

javascriptangularfirebasekey-value

Retrieve the top-level field from a Firestore document

I currently have a firestore database located at: https://i.sstatic.net/ebhXX.png My objective is to extract the value of the field "points/0/title" from its root. Is there any way to achieve this? ...

reactjstypescriptfirebasegoogle-cloud-firestore