Angular CDK Drag & Drop: Multi Direction Movement

## Angular CDK Drag & Drop The `@angular/cdk/drag-drop` module allows you to effortlessly and declaratively build drag-and-drop interfaces. It supports free dragging, list sorting, item transfers between lists, animations, touch devices, custom drag handles, previews, placeholders, horizontal lists, and axis locking. ## Reordering lists Wrapping a set of `cdkDrag` elements with `cdkDropList` groups them into a reorderable collection. As elements move, they will automatically rearrange. However, this won't update your data model; you can listen to the `cdkDropListDropped` event to update the data model after the user finishes dragging. ### Orientations Angular CDK supports 2 orientations for reordering lists: vertical (default) and horizontal. The `cdkDropList` directive assumes that lists are vertical by default. This can be changed by setting the `cdkDropListOrientation` property to `horizontal`. ### Mixed Orientation By default, `cdkDropList` sorts items by moving them with a CSS transform. This enables animated sorting for a better user experience, but it only works in one direction: either vertically or horizontally. From Angular Material `v18.1.0`, for sortable lists that need to wrap, you can set `cdkDropListOrientation="mixed"`. This uses a different sorting strategy by moving elements in the DOM, allowing items to wrap to the next line. However, it cannot animate the sorting action.