cdkDropListLockAxis="x" cdkDropListOrientation="horizontal" not working on table

[MaiGhoneim]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

8.2.3

Description

when enabling drag and drop in angular material table from columns headers for reoreder columns, cdkDropListLockAxis="x" cdkDropListOrientation="horizontal" do not working in angular 18 i attached my code in the following link: https://stackblitz.com/edit/stackblitz-starters-r6zvss?file=package.json

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-r6zvss?file=package.json Steps to reproduce:

1. trying to drag any column header

Expected Behavior

when dragging column header should be drag and drop only horizontail and in x direction

Actual Behavior

column header drag and drop to everywhere

Environment

• Angular: 18.2.2
• CDK/Material: 18.2.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

It looks like you put cdkDropList and cdkDrag on the same element. The cdkDrag needs to be a child of cdkDropList in order to be sortable.

[MaiGhoneim]

Thank you, working fine

[crisbeto]

Here's an example https://stackblitz.com/edit/mesggf?file=src%2Fexample%2Fcdk-drag-drop-table-example.html,src%2Fexample%2Fcdk-drag-drop-table-example.css. Note that the headers snap back to their original position, because I didn't hook up the dropped callback.